为什么在 React-Router-Dom 的 Router 中需要 'history'？

Question

通常，我们使用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>

但我不明白为什么Router需要history 。 有没有人可以伸出援手让我明白？

Answer 1

Router是其他路由器（例如 BrowserRouter 和 HashRouter 等）的低级接口。因此，如果您使用Router ，则必须提供history object，因为它没有自己的历史记录。

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

请参阅BrowserRouter和Router 。

来自文档：

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

以下是如何导入这些：

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

我们还可以使用别名来导入 BrowserRouter：

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

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

Answer 2

通常，我们使用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>

但我不明白为什么Router需要history 。 有没有人可以帮助我理解？