React-router same url not remounting, trying to figure out componentWillReceiveProps - reactjs

Question

I'm working on my first React app and having some troubles with routing, just looking for some guidance. I see that this is a specific problem for a lot of people, but having trouble following along with other answers.
From what I can tell of other answers, people are assigning keys to specific routes, and checking the key in componentWillReceiveProps(nextProps). I kinda get that, although not sure where to go from there in terms of re-rendering/mounting.
I'm simply trying to transition between the URLs /catalog/genre/:genre and /catalog/genres. Sorry in advance for the messy code, just trying to get it working!
App.js contains main routes, more specifically for this problem:
<Route path="/catalog/genres" component={Genres}/>
Genres.js:
import React, { Component } from 'react';
import {
Link,
BrowserRouter as Router,
Route,
} from 'react-router-dom';
class Genre extends Component {
constructor(props) {
super(props);
console.log(props);
this.state = {
data: [],
};
}
componentDidMount() {
fetch('http://localhost:3000/catalog/genre/58eacca74a0d2c105c68fbe9')
.then(response => response.json())
.then(json => {
this.setState({
data: json.genre_books
});
});
}
componentWillReceiveProps(newProps) {
console.log(newProps.params);
}
render() {
return (
<div>
<div>
Genre:
<label>
<ul>
{
this.state.data.map((piece) =>
<Link key={piece._id} to={`${piece.url}`}>
<li>
{piece.title}
</li>
</Link>
)
}
</ul>
</label>
</div>
</div>
);
}
}
class AllGenres extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
}
componentDidMount() {
fetch('http://localhost:3000/catalog/genres')
.then(response => response.json())
.then(json => {
this.setState({
data: json.genres_list
});
});
}
render() {
return (
<div>
All Genres:
<label>
<ul>
{
this.state.data.map((piece) =>
<Link key={piece._id} to={`${piece.url}`}>
<li>
{piece.name}
</li>
</Link>
)
}
</ul>
</label>
</div>
);
}
}
class Genres extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
}
componentDidMount() {
fetch('http://localhost:3000/catalog/genres')
.then(response => response.json())
.then(json => {
this.setState({
data: json.genres_list
});
});
}
render() {
return (
<div>
<Router>
<div>
<Route path="/catalog/genre/:genre" render={() => (
<Genre testKey='1'/>
)}/>
<Route exact path="/catalog/genres" render={() => (
<AllGenres testKey='2' />
)}/>
</div>
</Router>
</div>
);
}
}
export default Genres;

Answer 1

For people coming back to this problem, although componentWillReceiveProps(nextProps) is useful for other situations, I found a way around this by following this
guide.
Now I'm able to render based on the URL parameter genreId.
Here's the code:
App.js Nav component
class Nav extends Component {
constructor(props){
super(props);
this.state = {
tap: 0,
}
}
render() {
return (
<div >
<Router>
<div style={styles.mainContent}>
<Drawer open="TRUE" title="My App">
<MenuItem primaryText="Home" containerElement={<Link to="/catalog/home" />} />
<MenuItem primaryText="All books" containerElement={<Link to="/catalog/books" />} />
<MenuItem primaryText="All authors" containerElement={<Link to="/catalog/authors" />} />
<MenuItem primaryText="All genres" containerElement={<Link to="/catalog/genres" />} />
<MenuItem primaryText="All book-instances" containerElement={<Link to="/catalog/bookinstances" />} />
<hr></hr>
<MenuItem primaryText="Create new author" containerElement={<Link to="/catalog/author/create" />} />
<MenuItem primaryText="Create new genre" containerElement={<Link to="/catalog/genre/create" />} />
<MenuItem primaryText="Create new book" containerElement={<Link to="/catalog/book/create" />} />
<MenuItem primaryText="Create new book instance (copy)" containerElement={<Link to="/catalog/bookinstance/create" />} />
<hr></hr>
<MenuItem primaryText="About" containerElement={<Link to="/about" />} />
<MenuItem primaryText="Topics" containerElement={<Link to="/topics" />} />
</Drawer>
<Route path="/catalog/home" component={Home}/>
<Route path="/catalog/books" component={Books}/>
<Route path="/catalog/authors" component={Authors}/>
<Route path="/catalog/genres" component={Genres}/>
<Route path="/catalog/bookInstances" component={BookInstances}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
</div>
);
}
}
Genres.js
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link,
} from 'react-router-dom';
class GenreList extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
}
componentDidMount() {
fetch('http://localhost:3000/catalog/genres')
.then(response => response.json())
.then(json => {
this.setState({
data: json.genres_list
});
});
}
render() {
return (
<div>
All Genres:
<label>
<ul>
{
this.state.data.map((piece) =>
<Link key={piece._id} to={`${piece.url}`}>
<li>
{piece.name}
</li>
</Link>
)
}
</ul>
</label>
</div>
);
}
}
const Genre = ({match}) => (
<div>
<h3>{match.params.genreId}</h3>
</div>
)
const Genres = ({ match }) => {
return (
<div>
<Route path={`${match.url}/:genreId`} component={Genre}/>
<Route exact path={match.url} render={() => (
<div>
<GenreList url={match.url}/>
</div>
)}/>
</div>
);
}
export default Genres;
genre.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var GenreSchema = Schema({
name: { type: String, required: true, min: 3, max: 100 },
}, {
toObject: {
virtuals: true
},
toJSON: {
virtuals: true
} //reference to the associated book
});
// Virtual for bookinstance's URL
GenreSchema
.virtual('url')
.get(function () {
return '/catalog/genres/' + this._id;
});
//Export model
module.exports = mongoose.model('Genre', GenreSchema);