CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
humanbean
humanbean

Reputation: 562

Keeping the child route same on click of the parent route

I have two parent routes /home and /app.

Within /app there are two more nested routes. /app/first and /app/second

--/home

--/app
  --/app/first
  --/app/second

I have set links on home page to route within /home and /app.

When I click on the /app I wish to redirect the user to /app/first, which I have achieved using the Redirect component and it works fine but only on the first click. When I click on /app route again it doesn't redirect to /app/first again rather it fallbacks to /app

How do I keep routing to /app/first every time I click on the /app link even if I am already on /app.

Here is a sandbox for this issue.

Upvotes: 0

Views: 666

Answers (1)

dar
dar

Reputation: 97

Try

<Switch>
      <Route exact path="/app" render={() => <Redirect to="/app/first"/>}/>
      <Route path="/app/first" component={First} />
      <Route path="/app/second" component={Second} />
</Switch>

in your app.js file.

So what you want is the default "/app" route to render the {first} component AND show "/app/first" in the browser path? Yes?

Upvotes: 2

Related Questions