当前位置：首页 > news >正文

React Router 用法概览

news 2025/1/6 3:29:27

React Router 用法

React 使得开发者能够轻松地创建交互式的单页应用（SPA），单页应用的一个常见挑战是如何处理页面导航和路由吗，React Router 就是解决这个问题的工具

路由（Router）是 React Router 的核心概念当 URL 匹配某个路由时，React Router 会渲染该路由对应的组件。
React Router 会根据 URL 和路由的匹配规则来决定哪个组件需要渲染。匹配规则支持动态参数、正则匹配等。
并且React Router 允许你在一个路由内部嵌套另一个路由，从而实现更复杂的界面结构。

用法

导入 BrowserRouter 组件，并将其包裹在应用的根组件外部

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root')
);

BrowserRouter 和 HashRouter
BrowserRouter使用 HTML5 的 History API（如 pushState 和 replaceState）来实现无哈希的干净 URL。类似于常见的 URL，例如：https://example.com/about 每次路径发生变化时，它会使用 History API 修改浏览器的地址栏，而不刷新页面。
HashRouter 使用 URL 的哈希部分（#）进行路由管理，依赖浏览器的 hashChange 事件。URL 包含 # 符号，例如：https://example.com/#/about
HashRouter 把路径存储在 URL 的哈希部分，浏览器不会将哈希部分发送到服务器，因此页面不会刷新。URL 的哈希部分变化时，HashRouter 会拦截这些变化并更新页面。
browserRouter需要后端支持，服务器必须配置将所有请求指向入口文件(index.html);而HashRouter则直接在客户端处理，无需后端支持

使用Route定义路由
使用 Route 组件可以定义路由。每个 Route 组件都需要一个 path 属性，表示匹配的 URL 路径，以及一个 element 属性，表示在该路径匹配时需要渲染的组件。
React Router 允许你根据用户的身份、权限等条件来实现路由守卫和重定向功能。例如，使用 Navigate 组件可以实现页面重定向：

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';function App() {return (<div><Routes><Route path="/hone" element={<Home />} /><Route path="/about" element={<About />} /><Route path="*" element={<Navigate to={`/home`}/>}/></Routes></div>);
}

当用户访问 / 路径时，Home 组件将被渲染；当访问 /about 路径时，About 组件将被渲染。到其他路由，会被重定向到/home

嵌套路由
嵌套路由可以使用 Route 的 children 属性或者在 Route 内部定义子路由来实现

function App() {return (<Routes><Route path="/dashboard" element={<Dashboard />}><Route path="settings" element={<Settings />} /></Route></Routes>);
}

在这个例子中，/dashboard/settings 路径将渲染 Settings 组件，而 /dashboard 将渲染 Dashboard 组件

使用参数
React Router 允许在路由路径中使用动态参数并且可以通过 useParams 钩子获取

import React from 'react';
import { useParams } from 'react-router-dom';function User() {const { id } = useParams();return <div>User ID: {id}</div>;
}function App() {return (<Routes><Route path="/user/:id" element={<User />} /></Routes>);
}