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

Question

我正在使用 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？

Answer 1

你应该像这样使用路由设置

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 路由与您的 url 是绝对的，因为它以 / 开头。我认为更好的方法是删除它并将路线用作

<Route path='product' component={ProductView} />

Answer 2

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

您的第二个设置已接近，但您不应在shop/ 中包含尾部斜杠。 React Router 将为您将路径连接在一起，您无需担心包含斜线来连接 shop 和 product。 （例如，查看使用相对路径的this configuration）

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