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)，一切都会完美运行。