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')
);

我使用v3.0作为react-router。

Answer 1

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

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

您可以使用<Company>替换404页面的空白页。

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

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

1 个答案: