React-Router忽略服务器上的嵌套路由

Question

我正在尝试使用Express.js在服务器端渲染React应用程序。 但是，似乎我的某些路线已被跳过，我不确定为什么。

我的server.js

app.get('*', (req, res) => {
        console.log(routes);

  match(
    { routes: routes, location: req.url },
    (err, redirectLocation, renderProps) => {
      if (err) {
        return res.status(500).send(err.message);
      }
      if (redirectLocation) {
        return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
      }
      let markup;
      if (renderProps) {
        var InitialComponent = (
          <Provider store={store}>
              <RouterContext {...renderProps} />
          </Provider>
        );
        markup = renderToString(InitialComponent);
      } else {
        markup = renderToString(<NotFoundPage/>);
        res.status(404);
      }
      return res.render('index', { markup });
    }
  );
});

Routes.js

export let routes = (

  <Route path="/" component={TransitionContainer}>
      <IndexRoute component={Home}/>
      <Route path="home" component={Home}/>
      <Route path="bom/:bomID/" component={BOM}/>
        <IndexRoute component={BomItemsGrid}/>
        <Route path="grid" component={BomItemsGrid}/>
        <Route path="table" component={BomItemsTable}/>
      <Route path="*" component={NotFoundPage}/>
    </Route>


)

当我导航到/bom/6/table我得到以下的React树

Provider
  Router
    RouterContext
      TransitionContainer
        NotFoundPage

由于某种原因，它跳过了/bom/:bomID/路径中定义的BOM组件，并仅呈现NotFoundPage 。

为什么即使定义了match()找不到路线？

Answer 1

哦，我想念它。 您没有关闭BOM路线。 这个：

<Route path="bom/:bomID/" component={BOM}/>

应该：

<Route path="bom/:bomID/" component={BOM}> //<--- notice: No slash
  <IndexRoute component={BomItemsGrid}/>
  <Route path="grid" component={BomItemsGrid}/>
  <Route path="table" component={BomItemsTable}/>
</Route> //<--- add this