React Router v6新特性有哪些

这篇文章主要介绍“React Router v6新特性有哪些”，在日常操作中，相信很多人在React Router v6新特性有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React Router v6新特性有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

1. <Switch>重命名为<Routes>

该顶级组件将被重命名。但是，其功能大部分保持不变（嗨，瞎折腾）。

// v5  <Switch>      <Route exact path="/"><Home /></Route>      <Route path="/profile"><Profile /></Route>  </Switch>  // v6  <Routes>      <Route path="/" element={<Home />} />      <Route path="profile}        <Outlet />      </div>    )  }

3.3 多个<Routes />

以前，我们只能 在React App中使用一个 Routes。但是现在我们可以在React App中使用多个路由，这将帮助我们基于不同的路由管理多个应用程序逻辑。

import React from 'react';  import { Routes, Route } from 'react-router-dom';  function Dashboard() {    return (      <div>        <p>Look, more routes!</p>        <Routes>          <Route path="/" element={<DashboardGraphs />} />          <Route path="invoices" element={<InvoiceList />} />        </Routes>      </div>    );  }  function App() {    return (      <Routes>        <Route path="/" element={<Home />} />        <Route path="dashboardcat.jpg

v6中的所有路径匹配都将忽略 URL 上的尾部"/"。实际上，<Route strict>已被删除并且在 v6 中无效。这并不意味着您不需要使用斜杠。

在v5版本之前的路径，存在路由歧义

1.  当前路径:"/users"，则<Link to="me">将跳转<a href="/me">。

2.  当前路径:"/users/"，则<Link to="me">将跳转<a href="/users/me">。

React Router v6修复了这种歧义，取消了尾部"/"：

1.  当前路径:"/users"，则<Link to="me">将跳转<a href="/users/me">。

2.  当前路径:"/users"，则<Link to="../me">将跳转<a href="/me">。

其形式更像命令行cd的用法：

// 当前路径为 /app/dashboard   <Link to="stats">               // <a href="/app/dashboard/stats">  <Link to="../stats">            // <a href="/app/stats">  <Link to="../../stats">         // <a href="/stats">  <Link to="../../../stats">      // <a href="/stats">  // 命令行当前路径为 /app/dashboard  cd stats                        // pwd is /app/dashboard/stats  cd ../stats                     // pwd is /app/stats  cd ../../stats                  // pwd is /stats  cd ../../../stats               // pwd is /stats

到此，关于“React Router v6新特性有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！