Nested Routes in React not rendering correctly with react-router v4

Question

I have my root component main switch like this

<Provider store={createStoreWithMiddleware(reducers)}>
    <HashRouter history={history} >
      <Switch>
        <Route exact path="/login" name="Login Page" component={Login}/>
        <Route exact path="/register" name="Register Page" component={Register}/>
        <Route exact path="/404" name="Page 404" component={Page404}/>
        <Route exact path="/500" name="Page 500" component={Page500}/>
        <Route path="/Console" name="Console" component={Console}/>
        <Route path="/" name="Home" component={Full}/>
      </Switch>
    </HashRouter>
  </Provider>

And inside the Console component I have another switch defined like this

<main className="container">
  <div className="">
    <Switch>
      <Route path="/Create" name="Create Park" component={CreateNew} />
      <Route path="/" name="Console" component={HomePage} />
    </Switch>
  </div>
</main>

When I visit /Console HomePage component shows properly.

But the when I visit /Console/Create CreateNew component would not show but instead shows HomePage component.

What I am doing wrong here ? What should I do to show CreateNew component at /Console/Create

Shubham Khatri · Accepted Answer · 2017-12-26 05:57:21Z

The nested Routes must have an absolute path specified, You can use match.path as a prefix to the nested Route to provide the path as an absolute one

<main className="container">
  <div className="">
    <Switch>
      <Route path={`${match.path}/Create`} name="Create Park" component={CreateNew} />
      <Route path={`${match.path}/`} name="Console" component={HomePage} />
    </Switch>
  </div>
</main>

or else specify the complete path

<main className="container">
  <div className="">
    <Switch>
      <Route path="/Console/Create" name="Create Park" component={CreateNew} />
      <Route path="/Console/" name="Console" component={HomePage} />
    </Switch>
  </div>
</main>

According to React-Router match documentation:

A match object contains information about how a matched the URL. match objects contain the following properties:

params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path

isExact - (boolean) true if the entire URL was matched (no trailing characters)

path - (string) The path pattern used to match. Useful for building nested s

url - (string) The matched portion of the URL. Useful for building nested s

Malik Adil · Accepted Answer · 2017-12-26 05:56:33Z

0

the Console component is refactored as following:

<main className="container">
      <div className="">
        <Switch>
          <Route exact  path="/" name="Console" component={HomePage} />
          <Route exact  path="/Create" name="Create Park" component={CreateNew} />
    </Switch>
  </div>
 </main>

answered Dec 26, 2017 at 5:56

Malik Adil

15211 bronze badges

Collectives™ on Stack Overflow

Nested Routes in React not rendering correctly with react-router v4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related