react-router-dom 中的 Router 和 Route 有什么不同 [英] What is the different between Router vs Route in react-router-dom

问题描述

在 React-Router 文档中，我看到了它已经从 react-router-dom 导入了 Route 和 Router 模块.我想知道这两个模块有什么不同?

In the React-Router documentation I have seen that It has import both Route and Router modules from react-router-dom. I would like to know what is the different between those two modules?

推荐答案

路由器

Router 组件是连接浏览器位置和 React 应用程序的组件.它不会在您的页面上呈现任何可见的内容.它只是公开 API 以通过 React context 与浏览器的位置更改进行交互.因此，树下的任何组件都可以使用此 API 根据浏览器中的位置更改来更改其行为，或者将浏览器位置更改为他们想要的位置.

Router component is what makes the connection between browser location and the react application. It doesn't render anything visible on your page. It just exposes API to interact with location changes of the browser via React context. So any component down the tree can use this API to change their behavior based on location changes in the browser or change the browser location into what they want.

Router 是所有其他特定路由器组件的抽象.实际上，我们使用它的特定实现，如 BrowserRouter、MemoryRouter 和 HashRouter，它们使用不同的方法来管理浏览器历史记录.此外，Router 通常是组件树中的顶级组件，并且在整个应用程序中仅使用一次.所有其他 react-router 组件都应该是 Router 的后代，因为如果没有 Router 提供的 API，它们将无法运行.

Router is the abstract for all other specific router components. Practically, we use a specific implementation of it like BrowserRouter, MemoryRouter, and HashRouter which use different methods to manage browser history. Also, Router is usually a top-level component in the component tree and use only one time in the entire application. All other react-router components should be descendants of Router as they can't function without the API which Router provides.

路线

路由很容易解释.当位置与路线的路径匹配时，它只会呈现一些 UI.因此，一个应用程序可以根据其在组件树的不同级别中的布局复杂性而拥有多个路由.此外，Route 有一些额外的道具来配置匹配应该如何发生.Route 内部使用 Router 提供的 API 来访问位置并决定是否渲染给定的组件.

Route is much simple to explain. It just renders some UI when a location matches the route’s path. So an application can have many Routes based on its layout complexity in different levels of the component tree. Also, Route has some additional props to configure how the match should happen. Route internally use API provided by Router to access the location and decide whether to render the given component or not.

这篇关于react-router-dom 中的 Router 和 Route 有什么不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！