链接更改 url 但不呈现组件 React

Question

我在这里看到了很多类似的问题，但没有人回答我。 我想在我的应用上有一个简单的分页。

App.js：

import React from "react";
import "./App.css";
import "./components/Header/Header.css";
import Header from "./components/Header/Header";
import NaVbar from "./components/Navbar/NaVbar";
import Content from "./components/Content/Content";
import { BrowserRouter } from "react-router-dom";
import { LanguageProvider } from "./context/LanguageTranslator";

/*.*/
const App = (props) => {
  return (
    <LanguageProvider>
      <BrowserRouter>
        <div className="wrapper">
          <Header />
          <NaVbar />
          <Content />
        </div>
      </BrowserRouter>
    </LanguageProvider>
  );
};

export default App;

NavBar.jsx：

import React from "react";
import { NavLink } from "react-router-dom";
import "./Navbar.css";
import { useLanguage } from "../../context/LanguageTranslator";
import { getLanguage } from "../../utils/getLanguage";

const NaVbar = () => {
  const { language } = useLanguage();
  const currentLanguage = getLanguage(language);

  return (
    <div className="nav">
      <ul type="none">
        <li>
          <NavLink to="/">{currentLanguage.home}</NavLink>
        </li>
        <li>
          <NavLink to="/events/page=1">{currentLanguage.events}</NavLink>
        </li>
        <li>
          <NavLink to="#s">{currentLanguage.contacts}</NavLink>
        </li>
      </ul>
    </div>
  );
};

export default NaVbar;

Content.jsx：

import React, { Component } from "react";
import { Route } from "react-router";
import "./Content.css";
import Event from "./Event";
import EventList from "./EventList";
import Home from "./Home";

const Content = () => {
  return (
    <main>
      <div>
        <Route exact path="/" component={Home} />
        <Route exact path="/events/page=:page" component={EventList} />
        <Route exact path="/events/id=:id" component={Event} />
      </div>
    </main>
  );
};

export default Content;

EventList.jsx：

import React, { useState, useEffect } from "react";
import { Link, NavLink } from "react-router-dom";
import "./Content.css";
import "./Pagination";

import { useLanguage } from "../../context/LanguageTranslator";
import { getLanguage } from "../../utils/getLanguage";
import Pagination from "./Pagination";

const initialState = {
  fullAPI: {
    count: 0,
    next: null,
    previous: null,
    results: [],
    total_pages: 0,
  },
};
//* const obj = { a: 1, b: 2 };

//* const { b } = obj;

const EventList = (props) => {
  const { language } = useLanguage();
  const currentLanguage = getLanguage(language);

  const [state, setState] = useState(initialState);
  const [loading, setLoading] = useState(false);

  useEffect(async () => {
    try {
      setLoading(true);
      const langUrl = currentLanguage.urlName;
      const page = props.match.params.page;
      const defaultUrl = `http://localhost:8000/${langUrl}/api/events/?page=${page}`;
      // * url which we will fetch
      let currentUrl;

      currentUrl = defaultUrl;

      const res = await fetch(currentUrl);
      const fullAPI = await res.json();

      setState((prevState) => ({ ...prevState, fullAPI }));
      setLoading(false);
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
  }, []);

  const renderEvents = () => {
    const eventsList = state.fullAPI.results;

    return eventsList.map((item) => (
      <li key={item.id}>
        <p>
          {currentLanguage.title}:{item.title}
        </p>
        <p>
          <a href={item.link} className="aa">
            {currentLanguage.organizers}
          </a>
        </p>
        <Link to={`/events/id=${item.id}`} className="aa">
          {currentLanguage.linkToEvent}
        </Link>
      </li>
    ));
  };

  return (
    <main>
      <div>
        <ul>{renderEvents()}</ul>
        <Pagination
          totalPages={state.fullAPI.total_pages}
          next={state.fullAPI.next}
          previous={state.fullAPI.previous}
          currentPage={props.page}
          fetch={useEffect}
        />
      </div>
    </main>
  );
};

export default EventList;

最后，Pagination.jsx：

import React, { useState, useEffect } from "react";
import { Link, NavLink, Redirect, useHistory } from "react-router-dom";
import "./Content.css";
import "./pagination.css";

const Pagination = (props) => {
  // * pagination

  const pages = [];
  for (let i = 1; i <= props.totalPages; ++i) {
    pages.push(i);
  }

  const handleClick = (number) => {
    return `/events/page=${number}`;
  };

  const renderPageNumbers = pages.map((number) => {
    return (
      <li>
        <Link
          className="linkPrevNext"
          onCLick={() => props.fetch}
          to={`/events/page=${number}`}
        >
          {number}
        </Link>
      </li>
    );
  });

  return (
    <div>
      <ul className="pageNumbers">{renderPageNumbers}</ul>
    </div>
  );
};

export default Pagination;

我希望能够浏览页面，但那些带有页面的链接只会更改页面的 URL，如果我重新加载页面，数据正在呈现。