Question

我有一种感觉，我误用了browserHistory或者我的routes.jsx文件有问题。 browserHistory确实是我在React应用程序中所做的事情。同样，我认为这是一个浏览器历史问题可能完全不合适。我将从index.jsx发布我的routes.jsx文件和我的ReactDOM.render，以显示我将Provider组件browserHistory作为属性提供给我。

routes.jsx

export default (
    <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="inventory" component={RequireAuth(Inventory)} />
        <Route path="signup" component={Signup} />
        <Route path="single-product/:id" component={RequireAuth(Product)} />
        <Route path="examples" component={Examples} />
        <Route path="pricing" component={Pricing} />
        <Route path="profile" component={RequireAuth(Profile)} />
        <Route path="allProducts" component={RequireAuth(AllProducts)} />
        <Route path="reporting" component={RequireAuth(Reporting)} />
        <Route path="signout" component={Signout} />

        <Route path="tour" component={Tour}>
            <Route path="/business-types" component={BusinessTypes} />
            <Route path="/customers" component={Customers} />
            <Route path="/features" component={Features} />
            <Route path="/getting-started" component={GettingStarted} />
            <Route path="/multi-store" component={MultiStore} />
            <Route path="/support" component={Support} />
        </Route>
    </Route>
);

在index.jsx中渲染应用程序

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , document.querySelector('.masterContainer'));

你会看到我的一些路由包含在名为RequireAuth的HOC中，但这不会导致问题，它应该处理一个未经身份验证的用户尝试通过将其踢回'/ signup'来访问路由路线。重申一下，如果我访问我的浏览器网址并键入“localhost：3000 / signup”，它只会显示“”无法获取/注册“

Answer 1

这是人们对react-router的一个非常常见的问题，是的，你是对的，这是浏览器历史的一个问题。

如果您正在使用网络包，则需要将您的网络包服务器配置为默认所有GET请求到＆＃39; /＆＃39;使用一个名为historyApiFallback的东西。

我建议您通过这个非常快速且信息量很大的教程来避免将来与react-router混淆：

https://github.com/reactjs/react-router-tutorial

这里有关于browserHistory的信息，并阻止了您遇到的这个问题： https://github.com/reactjs/react-router-tutorial/tree/master/lessons/10-clean-urls

基本上，SPA已经通过放置＃＆＃39;＃＆＃39;来处理客户端路由。在URL中允许它在没有浏览器发送GET请求的情况下更新URL（在＃的右侧）。 browserHistory不使用＃，因此您需要使用其他方法在刷新页面或直接导航到URL时阻止GET请求。

您有几个选择

将--history-api-fallback添加到您的webpack npm脚本中，使其看起来像这样： "start": "webpack-dev-server --inline --content-base . --history-api-fallback"
将一些配置添加到您的webpack服务器，如下所示：

devServer：{ historyApiFallback：true， contentBase：＆＃39; ./' }
使用hashHistory并且您根本不需要担心它，但您的网址中有一个丑陋的＃

当我尝试通过直接在浏览器网址中输入我的应用中的特定路线时，我收到“无法获取'/ exampleRouteName'”消息

1 个答案: