React Router 6的新增功能

React Router is by far the most popular library in the React ecosystem. According to npm, it is downloaded about 3.6 million times a week. This number is almost half of React’s 7.6 million weekly downloads. This means that almost every second project that uses React uses React Router.

到目前为止，React Router是React生态系统中最受欢迎的库。 据npm称 ，它每周被下载约360万次。 这个数字几乎是React每周760万次下载的一半。 这意味着几乎每个使用React的项目都使用React Router。

That’s huge. Almost half of the React projects out there rely on React Router for routing. Chances are, if you have worked with React, you have worked with React Router.

好大 几乎有一半的React项目依赖于React Router进行路由。 如果您使用过React，那么您就有可能使用过React Router。

Now with version six in beta and a new release coming soon, we thought it would be interesting to take a dive into what’s new and what has changed in React Router version 6.

现在，随着Beta 6的发布以及即将发布的新版本的发布，我们认为深入研究React Router版本6的新功能和更改将是一件有趣的事情。

React Router并非没有争议 (React Router is not without controversy)

For a library that is so important to the React community, it has gone through a number of iterations and breaking changes. From its first release in 2014, and with every major release, the maintainers of React Router have introduced new features and breaking changes. Some in the React community have complained about the difficulty of upgrading from one version to the next, and have questioned the library’s constant churn.

对于对React社区如此重要的库，它经历了许多迭代和重大更改。 从2014年首次发布到每个主要版本，React Router的维护者都引入了新功能和重大更改。 React社区中的一些人抱怨从一个版本升级到另一个版本的困难，并质疑该库的持续流失。

Many have complained about the difficult upgrades that came with every new major release of the library.

许多人抱怨该库的每个新主要版本都带来了困难的升级。

并非所有人都需要升级 (Not everyone needs to upgrade)

If your application is working correctly, and you don’t need access to the new features promised in version 6, you can stick with your older version. Don’t feel the need to refactor your old applications to use React Router 6. If it ain’t broke, don’t fix it.

如果您的应用程序正常运行，并且您不需要访问版本6中承诺的新功能，则可以继续使用旧版本。 不需要重构您的旧应用程序以使用React Router6。如果它没有损坏，请不要修复它。

什么是新的 (What’s new)

So without further ado, let’s take a look at what’s new and what has changed in the latest version of React Router

因此，事不宜迟，让我们看一下最新版本的React Router中的新增功能和更改之处

•路由替换开关 (• Routes Replaces Switch)

Routes is introduced as a new element in React Router version 6. This new element allows us to easily define nested routes and relative routes, and make it easy to compose complex routes and layouts. In the previous version of the library, we defined Routes inside of a Switch.

Routes是React Router版本6中的新元素引入的。此新元素使我们能够轻松定义嵌套的路由和相对路由，并易于组合复杂的路由和布局。 在该库的先前版本中，我们在Switch内定义了Routes 。

•路线和链接是相对于其父级的 (• Routes and Links are relative to their parent)

Now, all Route and Link children of a Route are relative to their parent. This makes it a lot easier to build applications with many nested routes and makes it easier to reason about your application’s routing logic.

现在，一条Route所有Route和Link子代都是相对于其父代的。 这使构建具有许多嵌套路由的应用程序变得容易得多，并且使推理应用程序的路由逻辑变得更加容易。

Taking a look at Routes

看看路线

If you have used previous versions of React Router, you will immediately notice that we don’t need to use the exact prop anymore. You will also notice that the Link we defined is relative. Instead of passing /customers/:id, we can just use /:id.

如果您使用过以前版本的React Router，您将立即注意到我们不再需要使用exact prop。 您还将注意到我们定义的Link是相对的。 除了传递/customers/:id ，我们还可以使用/:id 。

•基于对象的路由 (• Object-based routes)

Now we can define our routes using the new useRouter hook. This allows you to build your routes using JavaScript objects. Let’s take a look at our previous application, now defined using useRouter.

现在，我们可以使用新的useRouter钩子定义路由。 这使您可以使用JavaScript对象构建路线。 让我们看一下以前使用useRouter定义的上一个应用程序。

You might ask yourself, why does it matter? Why would I want to compose my routes using JavaScript objects instead of JSX? One great use case would be to programmatically build routes, let’s say, based on the directory structure of your application. You could loop through all of the files in your pages directory, and build routes from that.

您可能会问自己，为什么重要？ 为什么要使用JavaScript对象而不是JSX来组成路线？ 一个很好的用例是根据您的应用程序的目录结构以编程方式构建路由。 您可以遍历pages目录中的所有文件，并从中建立路由。

•较小的包装尺寸 (• Smaller Bundle Size)

The team behind React Router claims that the new version is a lot smaller than the previous versions. They estimate that it’s about 70% smaller. Smaller bundles mean that your application loads faster, and content to your users faster.

React Router背后的团队声称新版本比以前的版本小很多。 他们估计它要小70％。 较小的捆绑包意味着您的应用程序加载速度更快，向用户的内容交付速度更快。

•悬浮就绪导航 (• Suspense Ready Navigation)

The old useHistory hook has been removed and replaced with a suspense-ready navigate API. Now you can use useNavigate to programmatically navigate around your application. They also expose a Navigate component that you can use to redirect your users.

旧的useHistory挂钩已被删除，并已替换为可useHistory导航API。 现在，您可以使用useNavigate以编程方式浏览应用程序。 它们还公开了可用于重定向用户的Navigate组件。

So that’s it! If you believe that your applications can benefit from smaller bundle sizes, and from suspense ready navigation, we strongly suggest that you upgrade to the latest version. Try out the beta, and see if you like it.

就是这样了！ 如果您认为应用程序可以从较小的捆绑包大小中受益，并可以通过暂挂导航进行导航，则强烈建议您升级到最新版本。 试用Beta，看看是否喜欢它。

翻译自: https://medium.com/frontend-digest/whats-new-in-react-router-6-732b06cc83e4