React 嵌套路由加载失败答案

【问题标题】：React nested route fails to loadReact 嵌套路由加载失败
【发布时间】：2020-03-16 23:19:55
【问题描述】：

我有一个页面，您可以从该页面转到编辑页面。因此，例如我的页面路由是 /page 和编辑页面路由应该是 /page/page-edit/:id 。但是当我尝试转到/page/page-edit/:id 时，url 会更新，但页面不会呈现。如果我提供像/page-edit/:id 这样的路线，我可以让它工作。这里有什么问题？

我的 App.js

     <div>
      {authenticateUser.authenticate()}
      <AuthContext.Provider value={authenticateUser.isAuthenticated}>
        <Switch>
          <LoginLayout path="/" component={Login} exact />
          <LoginLayout path="/register" component={Register} />
          <HomeLayout path="/dashboard" component={Dashboard} />
          <HomeLayout path="/page" component={EvcStations} />
          <HomeLayout path="/page/page-edit/:id" component={EvcEditContainer} />
          <Route path="/confirm-email" component={ConfirmEmailScreen} />
          <Route component={FourNoteFour} />
        </Switch>
      </AuthContext.Provider>
    </div>

我的 index.js

       import { Router } from 'react-router-dom';
       import { Provider } from 'react-redux';

       ReactDOM.render(
         <Provider store={store}>
           <Router history={history}>
             <App />
           </Router>
         </Provider>, 
       document.getElementById('root'));

我尝试像这样将子组件包装在父组件中

<HomeLayout path="/page" component={ParentComponent}>
   <HomeLayout path="/page/page-edit/:id" component={ChildComponent} />
</HomeLayout>

但是会导致父组件不渲染。

【问题讨论】：

标签： reactjs react-router react-router-dom react-router-redux

【解决方案1】：

我认为您需要指定确切的为

<HomeLayout path="/page" component={EvcStations} />

所以

<HomeLayout path="/page" component={EvcStations} exact/>

否则，/page 的组件将匹配，您将无法访问编辑组件。

【讨论】：