反应嵌套路由无法加载

时间:2019-11-21 05:35:15

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

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

但是这会导致父组件无法渲染。

1 个答案:

答案 0 :(得分:1)

我认为您需要指定准确的

df['column1'] = df['column1'].fillna((df['column1'].mean()))

所以

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

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