Как исправить ошибку после обновления страницы (react-douter-dom)?

Question

[Dyadko_Orest]

Пытаюсь сделать маршруты с помощью react-router-dom и столкнулся с проблемой что что если я даю двойной путь(/list/:name) то при переходе всё загружается, но если обновить страницу то я получаю ошибку(скриншот ошибки есть внизу).Если даю просто(/:name)всё работает хорошо. В чём может быть проблема?

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

//Здесь я получаю список фильмов по API и вывожу их

Скриншот ошибки

Comments

[NiyazNA]

Используйте HashRouter

Answer 1

[myxomor469]

Там надо настраивать роуты на бэкенде, так как роуты react'a работают только при загруженном файле с приложением, а он грузится по корневому адресу.
Можно на этой странице сделать прерывание перезагрузки и сделать механизм обновления через функции компонентов

Comments

[Dyadko_Orest]

То есть без бэкенда таким способом оно раб окотать не будет никак?Почему тогда при таком пути работает даже после перезагрузки

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

[myxomor469]

Dyadko_Orest, потому что таким образом ты все равно обращаешься к корневому адресу, просто передавая параметр

[MifeeX]

Dyadko_Orest, фишка в том, что реакт роутор дом работает по своему конкретному механизму, просто(конечно же не просто:)) изменяя url в браузере и под этот url накидывает соответствующий компонент.

А ты пытаешься получить доступ к серверу, однако серверу нужно указывать(кодом) какие у него есть роуты и что нужно делать, когда сервак видит запрос по этому роуту.

Такая схема...

UPD: на серваке нужно использовать другие порты. Т.е. у тебя аппа гоняет на :8080, а сервак, например, должен юзать :8000(или любой другой, но не :8080). В противно случае там все со всеми поперепутаются и будет плохо.... Я сам с этим не сталкивался и вам не советую