react-router-dom v6使用教程

React Router DOM v6 是一个用于 React 应用程序的路由库。它提供了一种在应用程序中进行页面导航和管理的方式。

下面是一个简单的使用教程来帮助你开始使用 React Router DOM v6：

1. 安装 React Router DOM v6：

   npm install react-router-dom@next

注意：v6 目前仍然是预发布版本，所以需要添加 `@next` 后缀来安装最新版本。

2. 在你的应用程序的入口文件（通常是 `index.js`）中导入所需的组件：

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

3. 使用 `Router` 组件将你的应用程序包裹起来，并定义你的路由规则：

   ReactDOM.render(
     <Router>
       <Route path="/" component={App} />
     </Router>,
     document.getElementById('root')
   );

这个例子中，所有匹配 `/` 路径的组件都将渲染 `App` 组件。

4. 在你的应用程序的其他组件中使用 `Link` 组件来创建导航链接：

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

   function Navigation() {
     return (
       <nav>
         <ul>
           <li>
             <Link to="/">Home</Link>
           </li>
           <li>
             <Link to="/about">About</Link>
           </li>
           <li>
             <Link to="/contact">Contact</Link>
           </li>
         </ul>
       </nav>
     );
   }

这个例子中，点击链接将会导航到对应的路径。

5. 在你的应用程序的其他组件中使用 `Route` 组件来定义不同路径下的组件渲染：

   import { Route } from 'react-router-dom';

   function App() {
     return (
       <div>
         <h1>My App</h1>

         <Route exact path="/" component={HomePage} />
         <Route path="/about" component={AboutPage} />
         <Route path="/contact" component={ContactPage} />
       </div>
     );
   }

这个例子中，`HomePage` 组件将会在 `/` 路径下渲染，`AboutPage` 组件将会在 `/about` 路径下渲染，`ContactPage` 组件将会在 `/contact` 路径下渲染。

这只是 React Router DOM v6 的一些基本用法，还有很多其他功能和概念可以学习。你可以查阅官方文档以获取更多详细的信息和示例代码：https://reactrouter.com/docs/en/v6