为啥在 React-Router-Dom 的路由器中需要“历史”？

Posted 2023-02-22

【中文标题】为啥在 React-Router-Dom 的路由器中需要“历史”？

【英文标题】：Why is 'history' necessary in the Router of React-Router-Dom?为什么在 React-Router-Dom 的路由器中需要“历史”？

【发布时间】：2021-06-26 19:43:54

【问题描述】：

通常，我们使用react-router-dom 库来导航到每个页面。 用法一般如下，和create-react-app创建的一样。

history.js文件

import * as history from 'history';

export default history.createBrowserHistory();

index.js文件

import Router from 'react-router-dom';

import history from '../history';

<Router history=history></Router>

但我不明白为什么history 对Router 是必需的。 有没有人可以帮我解释一下？

【问题讨论】：

我从未将历史道具传递给路由器组件，它工作正常。如果有的话，你能分享一下你正在学习什么教程吗？

另外，您不必从另一个文件导入历史对象。抽象是一回事，但过多的抽象会导致以后出现问题。

【参考方案1】：

Router 是其他路由器的底层接口，例如 BrowserRouter 和 HashRouter 等。因此，如果您使用 Router，则必须提供 history 对象，因为它没有自己的对象。

但是，如果您不想提供自己的历史记录对象，可以使用BrowserRouter。它有自己的history 对象。

请参阅 BrowserRouter 和 Router。

来自文档：

路由器：所有路由器组件的通用低级接口。通常，应用程序将使用高级路由器之一： <BrowserRouter>、<HashRouter>、<MemoryRouter>、<NativeRouter> 或 <StaticRouter>

这里是如何导入这些：

import  Router  from "react-router-dom"
import  BrowserRouter  from "react-router-dom"

我们也可以使用alias 来导入BrowserRouter：

import  BrowserRouter as Router  from "react-router-dom"
// Now Router is still a BrowserRouter
// Probably this causes the confusion

将低级Router 与您自己的history 一起使用的一个常见原因或好处是，通过这种方式，您可以在任何JS 文件中导入和使用history（不仅在一个反应组件）。