如何使用 react-router-dom 6 创建支持多路由的项目

使用 react-router-dom 版本 6 创建支持多路由的 React 项目，需要按照以下步骤操作。版本 6 对路由系统进行了较大的改动，引入了一些新的概念和组件，例如 <Routes> 和 <Route> 的更新用法。

第一步：创建一个新的 React 项目

首先，确保你的电脑上安装了 Node.js。然后，使用 create-react-app 快速搭建一个新项目：

npx create-react-app my-multi-route-app
cd my-multi-route-app

第二步：安装 react-router-dom v6

在你的项目中安装 react-router-dom v6。你可以通过 npm 或 yarn 进行安装：

npm install react-router-dom@6
# 或者
yarn add react-router-dom@6

第三步：设置路由

打开 src 目录下的 App.js 文件，用 react-router-dom v6 配置多路由。这里以三个简单的页面为例：主页、关于页和联系页。

1. 在 App.js 顶部导入必要的组件：

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

2. 定义一些简单的页面组件。这些可以是独立的组件文件，也可以直接在 App.js 内定义。这里我们直接在同一个文件里定义：

   const Home = () => <h2>主页</h2>;
   const About = () => <h2>关于我们</h2>;
   const Contact = () => <h2>联系我们</h2>;
   

3. 使用 <Router> 包裹你的应用，并使用 <Routes> 和 <Route> 来定义不同的路径对应的组件：

   function App() {
     return (
       <Router>
         <div>
           <nav>
             <ul>
               <li><a href="/">首页</a></li>
               <li><a href="/about">关于</a></li>
               <li><a href="/contact">联系我们</a></li>
             </ul>
           </nav>
   
           <Routes>
             <Route path="/about" element={<About />} />
             <Route path="/contact" element={<Contact />} />
             <Route path="/" element={<Home />} />
           </Routes>
         </div>
       </Router>
     );
   }
   
   export default App;
   

第四步：运行项目

保存更改后，可以通过以下命令启动开发服务器：

npm start
# 或者
yarn start

现在，你应该能看到一个基本的多路由 React 应用，它可以根据不同的 URL 显示不同的页面内容。

注意事项

• react-router-dom v6 中，<Switch> 组件被 <Routes> 替代。
• <Route> 组件的 component 属性被 element 属性替代，且 element 属性接收一个 JSX 元素作为参数。

以上就是使用 react-router-dom v6 创建支持多路由项目的简单步骤。根据实际需求，你可能需要进一步定制化这些路由规则，比如添加嵌套路由、动态路由等。