Reactjs component does not call componentWillMount method when route is matched - reactjs

Question

I am trying to create an SPA using React.
I have an index.js and App.js, SidebarContentWrap.js, Sidebar.js, Content.js components.
index.js has BrowserRouter and calls App.js Component.
App.js fetches data from API in componentWillMount method and then renders a dynamic route <Route path={/playlist/:slug} component={SidebarContentWrap}/>
According to my understanding whenever route will match, componentWillMount in SidebarContentWrap will be called and I will fetch data in it and then render that data. But it does not happen.
Here is some of my code.
/*App.js*/
class App extends Component {
constructor(props){
super(props);
this.state = {
playLists: [],
dataRoute: `${Config.apiUrl}playlists?per_page=3`
}
}
componentWillMount(){
fetch(this.state.dataRoute)
.then(res => res.json())
.then(playlists => this.setState((prevState, props) => {
return { playLists : playlists.map( playlist => {
return { name: playlist.name, slug: playlist.slug}
}
)};
}));
}
render() {
return (
<div className="App">
<Header />
<switch>
{/*<Route path={`/playlist/:slug`} render={({match})=><SidebarContentWrap match={match} playLists={this.state.playLists}/>}/>*/}
<Route path={`/playlist/:slug`} component={SidebarContentWrap}/>
</switch>
<Footer />
</div>
);
}
}
export default App;
AND
/*SidebarContentWrap.js*/
class SidebarContentWrap extends Component {
constructor(props){
super(props);
}
componentWillMount(){
//FETCH DATA HERE EVERY TIME WHEN URL IS CHANGED
}
render() {
return (
<div className="sidebar-content-wrap">
<div className="wrap clearfix">
<main className="App-content">
{/*<Route path={`/playlist/:slug`} render={()=><Content/>}/>*/}
<Content />
</main>
<aside className="App-sidebar">
<div className="tabs">
{/*{this.props.playLists.map((playlist) =>*/}
{/*<NavLink key={playlist.slug} to={`/playlist/${playlist.slug}`}>{playlist.name}</NavLink>*/}
{/*)}*/}
<NavLink key="playlist-1" to="/playlist/playlist-1">Playlist 1</NavLink>
<NavLink key="playlist-2" to="/playlist/playlist-2">Playlist 2</NavLink>
<NavLink key="playlist-3" to="/playlist/playlist-3">Playlist 3</NavLink>
</div>
<div className="tabs-content">
{this.props.match.params.slug}
{/*<Route path={`/playlist/:slug`} render={()=><Sidebar/>}/>*/}
<Sidebar />
</div>
</aside>
</div>
</div>
);
}
}
export default SidebarContentWrap;

Answer 1

componentWillMount only get's called once when the component is first rendered. When your route changes, you aren't unmounting that component, so that's why componentWillMount never gets called again. What you want is to use componentWillReceiveProps instead. When you change the route, new router props will get passed to the component. So you should use componentWillReceiveProps to react to a url change.
You'll still want your fetch in componentWillMount for the very first time the component is rendered, but after that, the fetching should happen in componentWillReceiveProps.
class SidebarContentWrap extends Component {
constructor(props){
super(props);
}
componentWillMount(){
this.fetchData(this.props);
}
componentWillReceiveProps(nextProps){
this.fetchData(nextProps);
}
fetchData(props) {
//FETCH DATA HERE EVERY TIME WHEN URL IS CHANGED
}
render() {
return (
<div className="sidebar-content-wrap">
<div className="wrap clearfix">
<main className="App-content">
{/*<Route path={`/playlist/:slug`} render={()=><Content/>}/>*/}
<Content />
</main>
<aside className="App-sidebar">
<div className="tabs">
{/*{this.props.playLists.map((playlist) =>*/}
{/*<NavLink key={playlist.slug} to={`/playlist/${playlist.slug}`}>{playlist.name}</NavLink>*/}
{/*)}*/}
<NavLink key="playlist-1" to="/playlist/playlist-1">Playlist 1</NavLink>
<NavLink key="playlist-2" to="/playlist/playlist-2">Playlist 2</NavLink>
<NavLink key="playlist-3" to="/playlist/playlist-3">Playlist 3</NavLink>
</div>
<div className="tabs-content">
{this.props.match.params.slug}
{/*<Route path={`/playlist/:slug`} render={()=><Sidebar/>}/>*/}
<Sidebar />
</div>
</aside>
</div>
</div>
);
}
}
export default SidebarContentWrap;

Answer 2

If you change the route with a Link, the component doesn't get remounted, it re-renders. You need to add the fetching logic to componentWillReceiveProps
class SidebarContentWrap extends Component {
//...
componentWillReceiveProps(nextProps) {
//fetch
}
}