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

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related