单击时反应路由器链接不更新端点

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;