我如何让 React Router basename 工作

Question

我正在尝试让我的 React 应用程序在 IE Edge 浏览器中的文件系统上运行。到目前为止，我已经走到这一步了。

import { createHistory, useBasename } from 'history'
let appHistory = useBasename(createHistory)({
    basename: '/build'
});
<Router history={appHistory}>
<Route path={window.location.pathname} component={App}>

这样我实际上可以看到页面呈现，但路由不起作用我在Edge浏览器中也得到了这个路径 file:///C:/C:/ ...等等。为什么它有两个C:/？

在 chrome 我得到这个错误

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/build/windows' cannot be created in a document with origin 'null' and URL 'file:///C:/src/myproject/build/index.html'.

Answer 1

你应该使用 useRouterHistory 而不是 useBaseName:

import { Router, Route, useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

const history = useRouterHistory(createBrowserHistory)({
    basename: '/dist'
});

<Router history={history}>
    <Route path="/" component={App} />
</Router>

我如何让 React Router basename 工作

How do I get React Router basename to work

reactjs

react-router

history.js