React Router 是 React 应用程序中用于处理客户端路由的库。它允许你将应用程序的不同部分链接在一起，使得用户可以通过点击链接而不是刷新页面来浏览不同的视图。React Router 6 是该库的最新版本，带来了许多改进和新特性。以下是关于 React Router 6 的详细指南，从入门到高级路由配置。
入门：了解React Router 6
1. 安装React Router 6
首先，你需要确保你的项目中已经安装了 React 和 React DOM。然后，你可以使用以下命令安装 React Router 6：
npm install react-router-dom@6
或者，如果你使用 yarn：
yarn add react-router-dom@6
2. 基本路由
React Router 使用

和

组件来定义和渲染路由。以下是一个简单的例子：
import { BrowserRouter as Router, Routes, Route } from ‘react-router-dom’;

function Home() {
return

Home Page

;
}

function About() {
return

About Page

;
}

function App() {
return (

);
}

export default App;
在这个例子中，我们创建了一个简单的应用，它有两个页面：主页和关于页面。
路由配置
1. 动态路由
React Router 允许你创建动态路由，这些路由可以匹配包含动态参数的路径。以下是一个动态路由的例子：
} />
在这个例子中，
:id
是一个动态参数，它将匹配任何包含
/users/
后跟一个 ID 的路径。
2. 子路由
子路由允许你在父路由内部定义嵌套路由。以下是一个子路由的例子：
} >
} />
} />

在这个例子中，当用户访问
/user/profile
或
/user/settings
时，相应的组件将被渲染。
3. 导航链接
使用

组件可以在不刷新页面的情况下导航到不同的路由：
Home
About
4. 重定向
你可以使用

组件来重定向用户到不同的路由：

高级特性
1. 路由加载器
React Router 允许你使用路由加载器来异步加载组件。这有助于提高应用的性能，特别是对于大型应用程序。
const LoadableComponent = React.lazy(() => import(‘./MyComponent’));

Loading…