ReactRouter v6升级的步骤

React Router v6 引入了一个 Routes 组件,它有点像 Switch ,但功能要强大得多。与 Switch 相比, Routes 的主要优势在于:

  • <Routes> 中的所有 <Route><Link> 都是相对的。这导致在 <Route path><Link to> 中的代码更精简和更可预测。
  • 路由的选择基于最佳匹配,而不是按顺序遍历。这避免了由于在 <Switch> 中定义较晚而导致无法到达的错误。
  • 路由可以嵌套在一个地方,而不是分散在不同的组件中。在中小型应用程序中,这样可以方便地一次性查看所有路由。在大型应用程序中,您仍然可以通过 React.lazy 动态加载将路由嵌套在打包中。

v6,您需要将所有 <Switch> 元素转换为 <Routes>

首先,让我们来谈谈 v6 中的相对路由和链接。

v5 是这样写:

// This is a React Router v5 app
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

function Users() {
  // In v5, nested routes are rendered by the child component, so
  // you have <Switch> elements all over your app for nested UI.
  // You build nested routes and links using match.url and match.path.
  let match = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${match.url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${match.path}/me`}>
          <OwnUserProfile />
        </Route>
        <Route path={`${match.path}/:id`}>
          <UserProfile />
        </Route>
      </Switch>
    </div>
  );
}

v6需要这个样子:

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

v5 应用程序中的所有 <Route children> 在 v6 中都变为了 <Route element={}>

对于子路由,index设置为true时,相当于一个默认的子路由

关于 <Route path> 模式的注意事项

React Router v6 使用简化的路径格式。在 v6 中, <Route path> 只支持两种占位符:动态 :id 样式的参数和 * 通配符。 * 通配符只能在路径末尾使用,不能在中间使用。

/groups

/groups/admin

/users/:id

/users/:id/messages

/files/*

/files/:id/*

在 v6 中,无论当前 URL 如何, <Link to="me"> 都会呈现相同的 <a href>

使用useRoutes代替react-router-config

v5 版本的 react-router-config 包中的所有功能都已移至 v6 的核心中。如果您喜欢/需要将路由定义为 JavaScript 对象,而不是使用 React 元素,那么您一定会喜欢这个功能。

function App() {
  let element = useRoutes([
    // These are the same as the props you provide to <Route>
    { path: "/", element: <Home /> },
    { path: "dashboard", element: <Dashboard /> },
    {
      path: "invoices",
      element: <Invoices />,
      // Nested routes use a children property, which is also
      // the same as <Route>
      children: [
        { path: ":id", element: <Invoice /> },
        { path: "sent", element: <SentInvoices /> },
      ],
    },
    // Not found routes work as you'd expect
    { path: "*", element: <NotFound /> },
  ]);

  // The returned element will render the entire element
  // hierarchy with all the appropriate context it needs
  return element;
}

使用useNavigate代替useHistory

React Router v6 引入了新的导航 API,该 API 与 <Link> 同义,可更好地兼容启用了悬念的应用程序。根据您的风格和需求,我们提供了该 API 的命令式和声明式版本。

useHistory 更改为 useNavigate ,并更改 history.pushhistory.replace 调用站点。

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

注意 :请注意,v5 版 <Redirect /> 默认使用 replace 逻辑(可通过 push 属性进行更改),而 v6 版 <Navigate /> 默认使用 push 逻辑,可通过 replace 属性进行更改。

相关推荐
TttHhhYy2 分钟前
vue写后台管理系统,有个需求将所有的$message消息提示换成确认框来增强消息提示效果,遇到嵌套过多的情况,出现某些问题
前端·javascript·vue.js·anti-design-vue
yangpipi-5 分钟前
数据结构(C语言版)-2.栈和队列
c语言·开发语言·数据结构
还在学习进步7 分钟前
C语言第九周课——经典算法
c语言·开发语言·算法
阿七想学习10 分钟前
数据结构《链表》
java·开发语言·数据结构·学习·链表
极客代码12 分钟前
【Python TensorFlow】进阶指南(续篇二)
开发语言·人工智能·python·深度学习·tensorflow
计算机学姐25 分钟前
基于Python的高校成绩分析管理系统
开发语言·vue.js·后端·python·mysql·pycharm·django
VertexGeek27 分钟前
Rust学习(三):rust基础Ⅱ
开发语言·学习·rust
一个数据小开发32 分钟前
业务开发问题之ConcurrentHashMap
java·开发语言·高并发·map
FIRE33 分钟前
uniapp小程序分享使用canvas自定义绘制 vue3
前端·小程序·uni-app
四喜花露水34 分钟前
vue elementui el-dropdown-item设置@click无效的解决方案
前端·vue.js·elementui