CODEWITHSUNDEEP
reactjsreact-routerreact-router-domreact-router-redux
CraZyDroiD
CraZyDroiD

Reputation: 7105

React nested route fails to load

I have a page where you can go to an edit page from that page. So for example my page route is /page and edit page route should be /page/page-edit/:id . But when i try to go to the /page/page-edit/:id the url updates but the page does not render. I can get it to work if i provide a route like /page-edit/:id. What is the issue here?

My 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>

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

I tried wrapping child component inside parent component like this

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

But then it results in parent component not rendering.

Upvotes: 0

Views: 30

Answers (1)

mattroberts
mattroberts

Reputation: 630

I think you need to specify exact for

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

So

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

Otherwise, the component for /page will match and you will not get to the edit component.

Upvotes: 1

Related Questions