I am hoping someone can confirm for me the expected behavior of react-router for nested routes. I would like to have base routes like 1) /route1 and then nested routes like 2) /route1/nested1 and 3) /route1/nested1/also. Is it possible for those nested routes to render child components without re-rendering that first route's component? Can someone confirm or possibly show a small code sample in which nested routes do not cause the parent component to re-render if you have done this successfully? Many thanks in advance. I believe this is not possible, and I astonished that react-router would be designed this way, since this is not how React itself works. I had thought perhaps the updates to the props.history caused the re-render, but if so, it does this whether or not those props are explicitly given to the component.
I have looked at the official docs and many pages of comments and questions online. Some folks seem say they were able to get this behavior while others say they simply cannot. Questions about this on the react-router GitHub were closed without being answered, since it was not considered a bug.
import React from 'react'
import { Link, Switch, Route, BrowserRouter as Router } from 'react-router-dom'
class Home extends React.Component {
render() {
return <div>Home</div>
}
}
class Route1 extends React.Component {
render() {
console.log('Route1 RENDER')
console.log('route1 props', this.props.history)
return (
<div>
<div>Route1</div>
<ul>
<li>
<Link to={'/route1/276364554643'}>nested route 1</Link>
</li>
<li>
<Link to={'/route1/276364554643/also'}>also</Link>
</li>
</ul>
<Route
exact
path={'/route1/:param_1'}
render={() => <NestedRoute1 />}
/>
<Route
exact
path='/route1/:param_1/also'
render={() => <Also />}
/>
</div>
)
}
}
class NestedRoute1 extends React.Component {
render() {
console.log('nested route history', this.props.history)
return <div>Nested Route Component</div>
}
}
class Also extends React.Component {
render() {
return <div>Also</div>
}
}
class Two extends React.Component {
render() {
return <div>Two</div>
}
}
class Three extends React.Component {
render() {
return <div>Three</div>
}
}
class App extends React.Component {
render() {
console.log('APP RENDER')
return (
<div className='App'>
<Router>
<div>
<ul>
<li>
<Link to='/'>home</Link>
</li>
<li>
<Link to='/route1'>route1</Link>
</li>
<li>
<Link to='/two'>two</Link>
</li>
<li>
<Link to='/any-other'>other</Link>
</li>
</ul>
<Switch>
<Route exact path='/' component={Home} />
<Route
path='/route1'
render={() => <Route1 />}
/>
<Route path='/two' component={Two} />
<Route path='/:other' component={Three} />
</Switch>
</div>
</Router>
</div>
)
}
}
export default App
EXPECTED: react-router should allow additions and changes to nested routes without an re-rendering parent components (the nested routes should match the component tree and behave the same way react behaves where changes in children do not trigger changes higher in the tree)
ACTUAL: changes to nested routes cause the parent component to re-render