Routing between two components - reactjs

Question

I'm new to React. I'm trying to learn react-router. What I'm trying to do is have two components link to each other like so:
Here is the App.js
import React from 'react';
import About from './About';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default App;
The About.js
import React from 'react';
import Home from './Home';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class About extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/' render={() =>
<div>
<Link to={'/home'}>Hello</Link>
</div>}/>
<Route path='/home' component={Home}/>
</Switch>
</Router>
);
}
}
export default About;
and the Home.js
import React from 'react';
import About from './About';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class Home extends React.Component {
ender () {
return (
<Router>
<Switch>
<Route path='/home' render={() =>
<div>
<Link to={'/'}>Hi</Link>
</div>}/>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default Home;
When I start the app, the About component gets rendered. However, when I click the link, the URL changes but the Home components does not get rendered. What am I doing wrong?

Answer 1

It's best practice to have your routing logic at one place, in this case in App.js.
import React from 'react';
import About from './About';
import Home from './Home';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/home' component={Home}/>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default App;
and then in Home.js
import React from 'react';
import {Link} from 'react-router-dom';
class Home extends React.Component {
render () {
return (
<div>
<h1>This is home component</h1>
<Link to={'/'}>Go to About Component</Link>
</div>
);
}
}
export default Home;
and in About.js
import React from 'react';
import {Link} from 'react-router-dom';
class About extends React.Component {
render () {
return (
<div>
<h1>This is About component</h1>
<Link to={'/home'}>Go to Home Component</Link>
</div>
);
}
}
export default About;