React Router 版本 6 路由配置差异

“React Router 是一个 JavaScript 框架，可让我们处理 React 应用程序中的客户端和服务器端路由”。换句话说，React Router 用于在应用程序中定义多个路由。当用户在浏览器中键入特定的 URL 时，如果该 URL 路径与路由器文件中的任何“路由”匹配，则用户将被重定向到该特定路由。

安装

现在我们已经大致定义了 React Router，接下来我们来谈谈如何安装它。安装过程相当简单。首先，打开终端并使用以下命令创建应用程序：

npx create-react-app my-app
cd my-app
npm start
创建 React 应用程序后，导航到根文件夹并运行：

npm 安装react-router-dom@6
<开关> VS <路线>

在 React Router 版本 5 中，路由配置是通过使用 <switch> 元素完成的。switch 元素检查其子路由并显示与当前 URL 相对应的第一个路由。在大多数场景和应用程序中，该组件是理想的，因为它允许应用程序内有多个路由和多个页面，但确保在任何给定时刻只有一个页面可见。

<开关>
 <精确从= "/"重定向 到= "/home" />  
<路由 路径= "/about" >
<关于/>
</路由>
<路由 路径= "/users" >
<用户/>
< /路线>
<路线 路径= "/home" >
<首页/>
</路线> <ai=49></切换>
在 React-Router V6 中，<Switch> 组件不再可用。相反，我们利用 <Routes> 包装器来配置路由。每个路由都是使用 <Route> 组件定义的，其中路径和组件作为元素传递，如下所示：

<路由>
<路由 路径= "/" 元素= { < Home /> } />
<路由 路径= "about" 元素= { < About /> } />
<路由 路径= "users" 元素= { < Users / > } />
</路线>

标签：React Router,JavaScript,终端
来源：