什么是 React Router？如何使用它？

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>);
};