react-router中的浏览器历史记录

Question

为什么我在我的 React 应用程序中使用 browserHistory，它仍然在 localhost:3000 提供一个页面，但是当它被部署时，我得到一个空白页面，控制台中没有任何内容。

但是，当我切换到 hashHistory 时，它在 localhost:3000 和我的网站上都运行良好。为什么会这样？

以下代码在我部署时不起作用（使用 browserHistory）：

import React from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

import App from './components/App';
import Home from './components/Home';
import Company from './components/Company';

const router = (
    <MuiThemeProvider>
        <StyleRoot>
            <Router history={browserHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Home} />
                    <Route path="/company" component={Company} />
                </Route>
            </Router>
        </StyleRoot>
    </MuiThemeProvider>
)

ReactDOM.render(
    router,
    document.getElementById('root')
);

我正在为 react-router 使用 v3.0。

Answer 1

首先，您使用的是哪个版本的 React Router？在版本 4 中，您需要创建 BrowserHistory 的实例，而不仅仅是传递类。

您可能将空白页面作为路由错误的后备页面。检查浏览器的控制台是否有错误消息。您应该获得http://localhost:3000/badurl 的默认路由，http://localhost:3000 和<App> 的<Home> 和<Company> 作为http://localhost:3000/company 的this.props.children。

您可以使用 <Route path="*" component={NotFoundPage} /> 将空白页替换为 404 页面。

如果这些都没有帮助，请更新问题并提供更多信息。