React Router Link not updating endpoint when clicked

Question

I'm trying to setup a basic React app using Router. However, when you click on a Link tag, it will render the correct component of EpisodeDisplay but, the endpoint will not update. I've tried changing the Route paths as well as updating the Link endpoints. When I manually type in the endpoint though (localhost:3000/season1), the MainPage will render. I'm at a loss on how to correct this issue.

Any help would be greatly appreciated!

App

 import React from "react"; import MainPage from "../MainPage/MainPage"; import "./App.scss"; import { Route, Switch } from "react-router-dom"; import EpisodeDisplay from "../EpisodeDisplay/EpisodeDisplay"; const App = () => { return ( <> <Switch> <Route exact path="/" render={() => <MainPage />} /> <Route exact path="/:season" render={() => <EpisodeDisplay />} /> </Switch> </> ); }; export default App;

MainPage

 import React, { useEffect, useState } from "react"; import Seasons from "../Seasons/Seasons"; import { getSeasons } from "../../APIcalls"; import { Link } from "react-router-dom"; import "./MainPage.scss"; const MainPage = () => { return ( <div className="div-bg"> <p> ANIMEtrics <br /> For My Hero Academia Fanatics </p> <div className="season-div"> <Link className="link" to={"/season1"}> <article className="season-card" data-value="season-1"> Season 1 </article> </Link> <Link className="link" to={"/season2"}> <article className="season-card" data-value="season-2"> Season 2 </article> </Link> <Link className="link" to={"/season3"}> <article className="season-card" data-value="season-3"> Season 3 </article> </Link> <Link className="link" to={"/season4"}> <article className="season-card" data-value="season-4"> Season 4 </article> </Link> <Link className="link" to={"/season5"}> <article className="season-card" data-value="season-5"> Season 5 </article> </Link> <Link className="link" to={"/movies"}> <article className="season-card" data-value="movies"> Movies </article> </Link> </div> </div> ); }; export default MainPage;

Episode Display

 import React from 'react'; const EpisodeDisplay = () => { return ( <h1>Episode Display</h1> ) } export default EpisodeDisplay;

Answer 1

Can you try wrapping content inside App.js with BrowserRouter as below

 import React from "react"; import MainPage from "../MainPage/MainPage"; import "./App.scss"; import { Route, Switch, BrowserRouter as Router } from "react-router-dom"; import EpisodeDisplay from "../EpisodeDisplay/EpisodeDisplay"; const App = () => { return ( <> <Router> <Switch> <Route exact path="/" render={() => <MainPage />} /> <Route exact path="/:season" render={() => <EpisodeDisplay />} /> </Switch> </Router> </> ); }; export default App;