如何让 React Router 基本名称工作答案

【问题标题】：How do I get React Router basename to work如何让 React Router 基本名称工作
【发布时间】：2016-10-03 22:46:32
【问题描述】：

我正在尝试让我的 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 中我得到这个错误

未捕获的 DOMException：无法在“历史”上执行“pushState”：A URL 'file:///C:/build/windows' 的历史状态对象不能在原始“null”和 URL 的文档中创建 'file:///C:/src/myproject/build/index.html'。

【问题讨论】：

也许你是从指南那里得到这段代码的，我错了，但我觉得将路径设置为window.location.pathname 不应该工作。您应该指定一个字符串作为您的路径，例如：path={'/'}
实际上它只适用于文件系统中的 window.location.pathname。现在唯一的问题是 pushstate 不起作用。

标签： reactjs react-router history.js

【解决方案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>

【讨论】：