How to fix error after page refresh (react-douter-dom)?

Question

JavaScript

I'm trying to make routes using react-router-dom and ran into a problem that if I give a double path (/list/:name) then everything loads when I go, but if I refresh the page I get an error (there is a screenshot of the error below). If I give just (/: name) everything works well. What could be the problem?

Routes

<Switch>
        <Route exact path="/list/:name" children={<ChooseListFilm />} />
    </Switch>

header

<ul>
        <li>
          <Link to="/list/popular">Popular</Link>
        </li>
        <li>
          <Link to="/list/top_rated">Top rated</Link>
        </li>
        <li>
          <Link to="/list/upcoming">Upcoming</Link>
        </li>

ChooseListFilm

export default function ChooseListFilm() {
    let {name} = useParams();
  return (
        <ListFilms  
          filmType={name}
        />
  );
}

ListFilm

//Here I get the list of movies by API and display them

Screenshot of the error

Answer 1

There you need to configure routes on the backend, since react's routes only work when the file with the application is loaded, and it is loaded at the root address.
You can interrupt the reboot on this page and make the update mechanism through the functions of the components