單擊時反應路由器鏈接不更新端點

Question

我正在嘗試使用 Router 設置一個基本的 React 應用程序。 但是，當您單擊鏈接標簽時，它會呈現 EpisodeDisplay 的正確組件，但端點不會更新。 我試過更改路由路徑以及更新鏈接端點。 當我手動輸入端點時 (localhost:3000/season1)，MainPage 將呈現。 我不知道如何糾正這個問題。

任何幫助將不勝感激！

應用程序

 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;

主頁

 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;

劇集顯示

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

Answer 1

您可以嘗試使用 BrowserRouter 將內容包裝在 App.js 中，如下所示

 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;