微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为什么在 React-Router-Dom 的路由器中需要“历史”?

如何解决为什么在 React-Router-Dom 的路由器中需要“历史”?

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

但我不明白为什么 historyRouter 所必需的。 有谁能帮我理解一下吗?

解决方法

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

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

参见 BrowserRouterRouter

来自文档:

路由器:所有路由器组件的通用低级接口。通常,应用程序将改用其中一个高级路由器: <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 组件中)。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。