React 嵌套路由加载失败

Question

我有一个页面，您可以从该页面转到编辑页面。因此，例如我的页面路由是 /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>

但随后导致父组件无法渲染。

Answer 1

我认为你需要为

指定确切的

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

所以

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

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

React 嵌套路由加载失败

React nested route fails to load

reactjs

react-router

react-router-redux

react-router-dom