问题描述
通常,我们使用 react-router-dom
库来导航到每个页面。
用法一般跟follow一样,和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
所必需的。
有谁能帮我理解一下吗?
解决方法
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 文件(不仅在 React 组件中)。