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

Answer 1

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

Answer 2

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>