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

Question

我正在尝试使用路由器设置一个基本的 React 应用程序。但是，当您单击 Link 标记时，它将呈现 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;