React Router V6：一些新变化

不久前，React Router 库已更新至版本 6，并且它带来了一些有趣的变化，我注意到并且看到人们在谈论这些变化，所以我将描述其中的一些。

如果你想将版本从 5 升级到 6，可以查看此链接将 React Router V5 升级到 V6

首先什么是 React Router？

React Router 是 React.js 中用于路由的软件包，正如文档所述：“React Router 是一个功能齐全的 React 客户端和服务器端路由库，它是一个用于构建用户界面的 JavaScript 库。React Router 可以在任何 React 运行的地方运行；在 Web 上、在使用 node.js 的服务器上以及在 React Native 上。”

现在我们了解了它的基本知识，让我们来谈谈它的一些新变化。

用路由替换 Switch 组件

如果你曾经使用过 React Router，你就会知道我们需要将路由包装到 Switch 组件中，以确保每次只加载其中一个路由，而不是加载所有匹配的路由。像这样



export function App() {
  return (
    <div>
      <Switch>
        <Route path="/about">
          <AboutPage />
        </Route>
        <Route exact path="/profile">
          <ProfilePage />
        </Route>
        <Route path="/profile/:id">
          <ProfileUserPage />
        </Route>
      </Switch>
    </div>
  )
}

现在在 V6 中，我们将名称从 Switch 更改为 Routes，现在 Routes 组件有一个名为 element 的新 prop，您可以在其中传递需要在此组件内渲染的组件，如下所示



export function App() {
  return (
    <div>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
        <Route exact path="/profile" element={<ProfilePage />} />
        <Route path="/profile/:id" element={<ProfileUserPage />} />
      </Routes>
    </div>
  )
}

内部变化和路径评估（不再需要精确的道具）

因此，在这个新版本中，我们进行了一些内部更改，React Router 对这些路径的评估以及选择要加载的路由的方式也发生了变化。在 V5 中，我们需要将精确的 prop 放在组件上，以便选择我们想要的特定路由，就像下面的 Profile path 中那样。



export function App() {
  return (
    <div>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
        <Route exact path="/profile" element={<ProfilePage />} />
        <Route path="/profile/:id" element={<ProfileUserPage />} />
      </Routes>
    </div>
  )
}

如果我们不放置那个精确的 prop，它将渲染以我们传递的路径开头的路径，这不是我们想要的，现在有了 V6，我们不再需要这个 prop，因为 React Router 总是会寻找我们传递的精确路径，就像这样



export function App() {
  return (
    <div>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="/profile/:id" element={<ProfileUserPage />} />
      </Routes>
    </div>
  )
}

现在我们来谈谈我们现有的 Link 组件，它仍然在 V6 上

NavLink activeClassName 属性不再存在

通过该 prop，您可以传递一个类，以便使用一些 CSS 修改该特定链接，以显示它已变为活动状态，如下所示



export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink activeClassName="active" to="/about" />
        </li>
        <li>
          <NavLink activeClassName="active" to="/profile" />
        </li>
      </ul>
    </header>
  )
}

使用 V6 你必须手动执行此操作，你可以通过将函数传递给我们在 React 上的 className prop 来实现，就像这样



export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/about" />
        </li>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/profile" />
        </li>
      </ul>
    </header>
  )
}

请注意，React Router 为您提供了 navData 参数，它是一个对象，并且内部具有 isActive 属性，如果路由在那一刻处于活动状态，则该属性为 true

useParams 钩子

V5 中的这个钩子与 V6 相比没有变化，您仍然可以以相同的方式使用它，传递参数来匹配您尝试匹配的特定 URL。

好了，以上就是 React Router 的一些变化，如果你想了解更多变化，可以观看 Academind 的这段视频，他在这里详细讲解了这些变化，或者你也可以在这里阅读文档。下次再见，谢谢！

文章来源：https://dev.to/gabrlcj/react-router-v6-some-of-the-new-changes-181m