react-router路由中的尾随正斜杠

IT技术 javascript reactjs react-router jsx
2021-05-13 14:59:41

我正在使用 react-router v3.0.0 和 react v15.1.0。我有以下路线设置：

ReactDom.render(<Provider store={store}>
    <Router history={BrowserHistory}>
        <Route path='shop' component={App}>
            <IndexRoute component={Shop} />
            <Route path='/product' component={ProductView} />
        </Route>
    </Router>
</Provider>, document.getElementById('app'));

如您所见，我Route的应用程序基础的路径为'shop'. 就用户而言，这应该导致 2 个单独的路由，http://example.com/shop并且http://example.com/shop/product. 然而，这种情况并非如此。

当我部署上述代码时，可以http://example.com/shop正确呈现，但http://example.com/shop/product什么也不呈现。事实上，我收到一个控制台错误：

Warning: [react-router] Location "/shop/product" did not match any routes

所以，我稍微改变了我的设置：

ReactDom.render(<Provider store={store}>
    <Router history={BrowserHistory}>
        <Route path='shop/' component={App}>
            <IndexRoute component={Shop} />
            <Route path='product' component={ProductView} />
        </Route>
    </Router>
</Provider>, document.getElementById('app'));

这将允许我渲染http://example.com/shop/（注意尾部的正斜杠）, http://example.com/shop/product，但不是http://example.com/shop。

是可以渲染http://example.com/shop，http://example.com/shop/，http://example.com/shop/product在同一应用程序内？

2个回答

第一次设置失败的原因是<Route> path，以斜杠开头的React Router被认为是绝对的根 ( /)，即使它们是嵌套的。

你的第二个设置很接近，但你不应该在shop/. React Router 会为您将路径连接在一起，您无需担心在 joinshop和product. （例如，看看这个使用相对路径的配置）

ReactDom.render(<Provider store={store}>
  <Router history={BrowserHistory}>
    <Route path='shop' component={App}>
        <IndexRoute component={Shop} />
        <Route path='product' component={ProductView} />
    </Route>
  </Router>
</Provider>, document.getElementById('app'));

您应该使用路线设置，如

ReactDom.render(<Provider store={store}>
    <Router history={BrowserHistory}>
        <Route path='shop' component={App}>
            <IndexRoute component={Shop} />
            <Route path='/shop/product' component={ProductView} />
        </Route>
    </Router>
</Provider>, document.getElementById('app'));

您的路线不起作用，因为您的product路线与您的网址是绝对的，因为它以/. 我认为更好的方法是将其删除并使用该路线作为

<Route path='product' component={ProductView} />
其它你可能感兴趣的问题
上一篇错误：看起来您在另一个中嵌套了一个“NavigationContainer”。通常你只需要在应用程序的根目录下一个容器 下一篇使用 flatpickr 无法正确显示日历