React router exact matching only updating URL without re-render of DOM - reactjs

Question

I am connected to an API (The Movie DB) which is returning a list of results (Movies), and when I click into one of the results of the API I need to see a detail page. I have set up dynamic routing, however when I click for the detail page, my URL changes to something like: 'http://localhost:3000/moviedetails/2503', where the 2503 is a unique item ID. However, the DOM is not re-rendering. When I refresh with the same URL, I am then forwarded to the correct page - but I need this to happen upon the click of the link to the details page.
All questions I have seen online have stated that you must use the exact keyword within your routes to fix this, however I am using the exact keyword on all routes except the dynamic one, and still encountering the issue of the DOM not re-rendering.
My App.js file is as follows:
import React from 'react';
import './App.css';
import Home from './components/Home';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import About from "./components/About.js"
import Discover from './components/Discover';
import Favourites from './components/Favourites';
import Rated from './components/Rated';
import Nav from './components/Nav';
import MovieDetails from './components/MovieDetails'
function App() {
return (
<Router>
<div className="App">
<Nav />
<Switch>
<Route path="/moviedetails/:id" component={MovieDetails}/>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
<Route path="/discover" exact component={Discover} />
<Route path="/favourites" exact component={Favourites} />
<Route path="/rated" exact component={Rated} />
</Switch>
</div>
</Router>
);
}
export default App;
My MovieRow.js (which includes the link to the details page) is as follows:
import React from "react";
import { Link } from "react-router-dom";
class MovieRow extends React.Component {
render() {
return (
<div>
<table key={this.props.movie.id}>
<tbody>
<tr>
<td>
<img width="150" alt="poster" src={this.props.movie.poster_src} />
</td>
<td>
<h3>{this.props.movie.title}</h3>
<p>{this.props.movie.overview}</p>
<Link to={`/moviedetails/${this.props.movie.id}`}>
View Movie Details
</Link>
</td>
</tr>
</tbody>
</table>
</div>
);
}
}
export default MovieRow;
My MovieDetails component (which is to be returned when link to details is clicked on) is not yet connected to the API and only contains the following:
import React from "react";
import { Link } from "react-router-dom";
class MovieDetails extends React.Component {
render() {
return (
<div>
movie details
</div>
);
}
}
export default MovieDetails;

Answer 1

Hi William welcome to the StackOverflow community:
Can you please check your console if you are getting any kind of error or something:
as this POC: https://codesandbox.io/s/blissful-dust-nrcrj works fine with the following components.
index.js
---------
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Rated from "../components/Rated";
import Home from "./Home";
function App() {
return (
<Router>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/rated" exact component={Rated} />
</Switch>
</Router>
);
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Home.js
-------
import React from "react";
import { withRouter } from "react-router";
const Home = props => {
return (
<button onClick={() => props.history.push("/rated")}>GOTO RATED</button>
);
};
export default withRouter(Home);
Rated.jsx
---------
import React from "react";
const Rated = () => <h1>Rated</h1>;
export default Rated;