Keeping the child route same on click of the parent route

Question

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.

Answer 1

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?