React Router 更改 URL 但不重新渲染組件

Question

我正在制作一個 ReactJS 網站，問題是當用戶單擊<Link to="path">時，URL 位置發生變化，但整個網頁變黑並在<div id="root"></div>內<div id="root"></div>沒有子項，除非我重新加載頁面，在這種情況下頁面將正常呈現。

在web中搜索，說用BrowserRouter包裹所有內容，用<Switch> ，當然我試過了，還是不行。

這是我的代碼app.js

import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Indirizzi from "./Contenuti/Indirizzi";
import Bottone from "./Util/Bottone";
import MostraMaterie from "./Contenuti/MostraMaterie";
import "./App.css";
import FullNavBar from "./NavBar/FullNavBar";

function App() {
  const [indirzzi, cambiaIndirizzi] = useState([]);

  const fetchIndirizzi = async () => {
    let indirizzi = await fetch(
      "https://vps.lellovitiello.tk/Riassunty/API/indirizzi.php"
    );
    indirizzi = await indirizzi.json();

    cambiaIndirizzi(indirizzi);
    console.log(indirizzi);
  };
  useEffect(fetchIndirizzi, []);

  return (
    <Router>
      <Switch>
        <Route path="/mostraMateria/:id">
          <MostraMaterie />
        </Route>
        <Route exact path="/">

          <FullNavBar indirizzi={indirzzi} />{" "}
          <Link to="/Login">
            <Bottone TestoBottone="Per caricare un riassunto" />
          </Link>{" "}
          <Indirizzi key="Indirizzi" data={indirzzi} />{" "}
        </Route>{" "}
      </Switch>{" "}
    </Router>
  );
}

export default App;

我試圖在文件中移動<Route path="/mostraMateria/:id"> ，但結果總是一樣的。

讓它工作的唯一方法是刪除<Switch>但這將始終呈現另一個路由器，如果這是可解決的，我該如何解決？

編輯即使按照評論中的建議向兩條路線添加精確的內容仍然不起作用。

應用程序.js

import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Indirizzi from "./Contenuti/Indirizzi";
import Bottone from "./Util/Bottone";
import MostraMaterie from "./Contenuti/MostraMaterie";
import "./App.css";
import FullNavBar from "./NavBar/FullNavBar";

function App() {
  const [indirzzi, cambiaIndirizzi] = useState([]);

  const fetchIndirizzi = async () => {
    let indirizzi = await fetch(
      "https://vps.lellovitiello.tk/Riassunty/API/indirizzi.php"
    );
    indirizzi = await indirizzi.json();

    cambiaIndirizzi(indirizzi);
    console.log(indirizzi);
  };
  useEffect(fetchIndirizzi, []);

  return (
    <Router>
      <Switch>
        <Route exact path="/mostraMateria/:id">
          <MostraMaterie />
        </Route>
        <Route exact path="/">

          <FullNavBar indirizzi={indirzzi} />{" "}
          <Link to="/Login">
            <Bottone TestoBottone="Per caricare un riassunto" />
          </Link>{" "}
          <Indirizzi key="Indirizzi" data={indirzzi} />{" "}
        </Route>{" "}
      </Switch>{" "}
    </Router>
  );
}

export default App;

編輯 2

甚至使用import { withRouter } from "react-router"; 並export default withRouter(MostraMaterie); 在應該顯示的組件內部不起作用。

編輯 3

我創建了一個新的 React 項目，路由在那里工作，我現在的問題是，因為我的<Link>破壞了我的應用程序在另一個組件內的組件等等，這可能是問題所在嗎？

Answer 1

我的問題解決了，怎么解決？ 我不知道。

我正在修復控制台給出的警告，然后突然開始工作。

我修復的錯誤是：

1) 使用效果不要期望 Promise 作為參數

2）每個孩子都必須有他們唯一的鑰匙。

Answer 2

我在 React Router v5 中遇到了完全相同的問題。 我認為版本“react-router-dom”中存在錯誤：“^5.2.0”。

您只需安裝較新的版本 (v6)，一切都會完美運行。