tutorials/react-router-guide

React Router 是一个流行的库，用于在 React 应用程序中处理路由。以下是一些关于 React Router 的教程，帮助您更好地理解和使用它。

基础概念

React Router 提供了三种组件来处理路由：

BrowserRouter：使用 HTML5 的 History API。
HashRouter：使用哈希值。
NativeRouter：适用于 React Native。

安装

首先，您需要安装 React Router。可以通过以下命令进行安装：

npm install react-router-dom

路由配置

在 React 应用程序中，您可以使用 <Route> 组件来定义路由。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

动态路由

如果您想要动态地匹配路径参数，可以使用 Route 组件的 path 属性。

<Route path="/users/:id" component={User} />

在上述代码中，:id 是一个参数，它将被传递给 User 组件。

路由导航

要导航到不同的路由，您可以使用 <Link> 或 <Redirect> 组件。

<Link to="/about">About</Link>
<Redirect to="/home" />

高级用法

React Router 还提供了许多高级用法，例如：

命名路由
动态导入
嵌套路由
路由守卫

更多信息，请参考本站链接：/React Router 进阶教程