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 "/".
<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
解决方案
There are a few things that you need to correct.
First, you must have just a single Router in your App and not nested Router
Second, If you have an exact keyword on the parent Route then the nested Routes won't match since the match will fails at the parent itself
Third, Then you don't want to pass custom props to the child component, you must render them like component={Home} and not component={() => <Home/>} and if you want to pass props to children, you must use render and not component prop and write render={(props) => <Home test="1" {...props}}
Your complete code will look like
import React, { Component } from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class App extends Component {
render() {
return (
<div className="App">
<Router>
<div>
<Link to="/">
<button>Go to home</button>
</Link>
<Route path="/" component={Home} />
<Route exact path="/other" component={Other} />
</div>
</Router>
</div>
);
}
}
class Home extends Component {
render() {
return (
<div className="home">
<div>
<Route exact path="/" component={HomeController} />
<Route exact path="/about" component={About} />
</div>
</div>
);
}
}
class HomeController extends Component {
render() {
return (
<div className="homecontroller">
<Link to="/about">
<button>Go to about</button>
</Link>
</div>
);
}
}
class About extends Component {
render() {
return <div className="about">ABOUT</div>;
}
}
class Other extends Component {
render() {
return <div className="other">OTHER</div>;
}
}
render(<App />, document.getElementById("root"));
