CODEWITHSUNDEEP
reactjsreact-router-v4react-router-dom
N.SH
N.SH

Reputation: 693

How can handle not found page for nested routing in react router v4?

I have 2 different part in my app , first part is site and the other is management panel in this case i have nested routing with react router dom but i can't handle not found page for url that is for panel ; for example i want /dashboard/something be redirect to not found page my routing is in below : 

<Switch>
    {/* portal */}
    <Route exact path='/' component={Portal} />
    <Route path="/landing" component={Portal} />
    <Route path="/login" component={Portal} />
    <Route path="/callback" component={Callback} />
    <Route path="/activation" component={Portal} />
    <Route path="/confirmation" component={Portal} />
    <Route path="/opportunities/:id" component={Portal} />
    <Route path='/panel' component={Portal} />
    <Route path='/electiondetails/:id' component={Portal} />
    <Route path='/errors' component={Portal} />
    {/* election panel */}
    <Route path='/electionpanel' component={Portal} />
    {/* dashboard */}
    <Route path='/dashboard' component={Index} />
    <Route path='/dashboard/login' component={Index} />
    <Route path='/dashboard/cartable/requests' component={Index} />
    <Route path='/dashboard/elections-management' component={Index} />
    {/* not found */}
    <Route path="/404" component={Portal} />
    <Redirect from="/**/" to="/404"></Redirect>
</Switch>

Upvotes: 1

Views: 2453

Answers (1)

frogatto
frogatto

Reputation: 29285

/dashboard/something is always matched with the following route:

<Route path='/dashboard' component={Index} />

so, you'll be presented with the Index component. If you'd need to pass by this route and show a 404 page you should mark it as exact:

<Route exact path='/dashboard' component={Index} />

Also you won't need to Redirect to that 404 page, simply just put a Route without path:

Replace

<Route path="/404" component={Portal} />
<Redirect from="/**/" to="/404"></Redirect>

with

<Route component={Portal} />

Upvotes: 3

Related Questions