So what I want is to have a top-level routing in App.js
that routes to
Home
on "/". In Home
i want to render a few things and then one place where I chose what to render based on the path.
i.e. if the path is "/" I want to show a Link
that can take me to "/about", if the path is "/about" I'll show the About
component there.
In App.js
I always have a Link
that can take me back to "/".
So App.js
render this:
<Router>
<div>
<Link to="/">
<button>Go to home</button>
</Link>
<Route exact path="/" component={() => <Home/>} />
<Route exact path="/other" component={() => <Other/>} />
</div>
</Router>
Home
render this:
<div>
THIS IS HOME WOO!
<Router>
<div>
<Route exact path="/" component={() => <HomeController/>} />
<Route exact path="/about" component={() => <About/>} />
</div>
</Router>
</div>
HomeController
render this:
<Link to="/about">
<button>Go to about</button>
</Link>
and About
render this:
<div>
ABOUT
</div>
When I start the app it looks like this:
When I click 'Go to about' it looks like this:
correctly updating the url and what is showed by the router in Home
But if I now click on 'Go to home' this happens:
correctly updating the url but keeping the 'about' page when rendering Home
?
Why is this? Why does "/" seem to still route to "/about"? What would I need to change to make the button route back to "/" and show the 'Go to about'-button again?
Here is all the code I used to recreate the issue: pastebin
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…