React Router 是一个用于在 React 应用程序中实现路由的库。它使得开发者可以在单页应用（SPA）中创建多个视图，并在不同的 URL 之间进行导航。通过 React Router，开发者能够处理 URL 的变化，渲染不同的组件，管理历史记录，并实现动态路由。
React Router 的主要特点
- 组件化：React Router 采用组件化的设计，将路由配置与 UI 组件结合在一起。
- 嵌套路由：支持嵌套路由，可以创建复杂的路由结构。
- 动态路由：可以根据应用状态动态生成路由。
- 路由守卫：可以实现访问控制，确保用户在特定条件下才能访问某些路由。
- 历史管理：自动管理浏览历史，支持前进和后退操作。
安装 React Router
在项目中使用 React Router，首先需要安装它。可以使用 npm 或 yarn 进行安装：
npm install react-router-dom
或者
yarn add react-router-dom
使用 React Router
1. 基本用法
首先，在应用的入口文件中，通常是 index.js 或 App.js，导入 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')
);
接下来，在 App.js 中定义路由：
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';const App = () => {return (<Switch><Route path="/" exact component={Home} /><Route path="/about" component={About} /><Route component={NotFound} /></Switch>);
};export default App;
在上面的代码中：
Switch组件用于确保只渲染一个匹配的Route。Route组件用于定义路径和对应的组件。exact属性确保只有在路径完全匹配时才会渲染该路由。
2. 路由参数
React Router 支持路由参数，可以在 URL 中使用动态部分：
<Route path="/user/:id" component={UserProfile} />
在 UserProfile 组件中，可以通过 props.match.params 访问参数：
const UserProfile = ({ match }) => {return <h1>User ID: {match.params.id}</h1>;
};
3. 嵌套路由
可以在一个路由组件中定义嵌套路由：
const Dashboard = () => (<div><h2>Dashboard</h2><Route path="/dashboard/stats" component={Stats} /><Route path="/dashboard/reports" component={Reports} /></div>
);<Route path="/dashboard" component={Dashboard} />
4. 使用 Link 组件进行导航
使用 Link 组件来创建导航链接：
import { Link } from 'react-router-dom';const Navbar = () => (<nav><Link to="/">Home</Link><Link to="/about">About</Link><Link to="/dashboard">Dashboard</Link></nav>
);
5. 编程式导航
可以使用 useHistory 钩子进行编程式导航：
import { useHistory } from 'react-router-dom';const Login = () => {const history = useHistory();const handleLogin = () => {// 登录逻辑history.push('/dashboard');};return <button onClick={handleLogin}>Login</button>;
};
6. 路由守卫
可以在路由中添加访问控制逻辑，例如保护某些路由不被未授权用户访问：
const PrivateRoute = ({ component: Component, ...rest }) => {const isAuthenticated = /* 你的认证逻辑 */;return (<Route{...rest}render={props =>isAuthenticated ? (<Component {...props} />) : (<Redirect to="/login" />)}/>);
};// 使用 PrivateRoute
<PrivateRoute path="/dashboard" component={Dashboard} />
7. 路由重定向
可以使用 Redirect 组件实现重定向：
<Route path="/old-path"><Redirect to="/new-path" />
</Route>
8. 使用 Hooks
React Router 提供了一些 Hooks 以简化路由的使用：
useLocation：获取当前的 location 对象。useParams：获取路由参数。useRouteMatch：获取当前路由的匹配信息。
示例：
import { useParams, useLocation } from 'react-router-dom';const UserProfile = () => {const { id } = useParams();const location = useLocation();return (<div><h1>User ID: {id}</h1><p>Current URL: {location.pathname}</p></div>);
};
总结
React Router 是一个强大的路由管理工具，能够帮助开发者轻松地在 React 应用中实现复杂的路由逻辑。通过组件化的方式，React Router 使得路由配置与 UI 组件的结合变得简单直观，同时支持动态路由、嵌套路由和路由守卫等功能。