CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Sanjeev Malagi
Sanjeev Malagi

Reputation: 441

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

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

Upvotes: 2

Views: 419

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 282160

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

Upvotes: 3

Malik Adil
Malik Adil

Reputation: 152

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>

Upvotes: 0

Related Questions