React Router v6 教程

React Router 是 React 应用的路由管理库，它允许我们为应用定义路径和组件的映射关系。在 React Router v6 中，API 和概念发生了很大的变化，使得路由管理更加简洁和灵活。

安装

首先，你需要确保你的项目中已经安装了 React 和 React DOM。然后，可以通过以下命令安装 React Router v6：

npm install react-router-dom@6

基本使用

在 React Router v6 中，我们使用 <Router> 组件包裹我们的应用，并使用 <Route> 和 <Switch> 组件来定义路径和对应的组件。

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

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

export default App;

在上面的例子中，我们定义了三个路由：首页（/）、关于页面（/about）和联系方式页面（/contact）。

路由链接

在 React Router v6 中，我们使用 <Link> 组件来创建导航链接。

import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/about">关于</Link>
        </li>
        <li>
          <Link to="/contact">联系方式</Link>
        </li>
      </ul>
    </nav>
  );
}

高级功能

React Router v6 还提供了许多高级功能，例如：

• 动态路由参数
• 导航守卫
• 嵌套路由
• 重定向

更多高级功能和使用方法，请参考官方文档：React Router v6 文档

React Router