React Router changes the URL but doesn't rerender the component

Question

I'm making a ReactJS websites, the problem is that when the user click on a <Link to="path"> the URL location changes, but the whole webpage becomes black and inside the <div id="root"></div> there is no child, except if I reload the page, in that case the page will normally render.

Searching in the web, they say to use BrowserRouter that wraps all the content, and to use the <Switch>, and of course I've tried it, but still don't work.

This is my code 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;

I've tried to move around the <Route path="/mostraMateria/:id"> around in the file, but the result is always the same.

The only way to let this work is to remove the <Switch> but this will render the other router always, how can I solve if this is solvable?

edit Even adding exact as suggested in the comments to both routes still doesn't work.

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 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;

Edit 2

Even using import { withRouter } from "react-router"; and export default withRouter(MostraMaterie); inside the component that should be shown doesn't work.

Edit 3

I've created a new React Project, and there the routes work, my question now is, because I've the <Link> that breaks my app inside a component inside another and so on, could this be the problem?

Answer 1

I had a exact same problem in react Router v5. I think that there is a bug in version "react-router-dom": "^5.2.0".

You only have to install newer version (v6) and than everything will work perfectly.

Answer 2

I've solved my problem, how? I don't know.

I was fixing warnings given by the console, and suddenly start working.

The error I fixed were:

1) Use effect doen't expect a Promise as parameter

2) Every child must have their unique key.