Блог

Новая версия react-router-dom (версия 6.0.0) не идентифицирует «перенаправление». Какова альтернатива для этого?

Перенаправление выполняется только через Navigate компонент с указанным replace реквизитом.

 <Navigate replace to="/" />
 

Если вы хотите реплицировать перенаправление Redirect компонента RRDv5 с пути, тогда вам нужно объединить с Route .

 <Route path="/somePath" element={<Navigate replace to="/" />} />
 

• Перейдите
• Маршруты и маршрут

Если вы не рендерите свое приложение на сервере, вы все равно можете перенаправить начальный рендеринг на клиенте следующим образом:

 import { Routes, Route, Navigate } from "react-router-dom";

    function App() {
      return (
        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="/" element={<Navigate replace to="/home" />} />
        </Routes>
      );
    }
 

В приведенном выше примере, когда кто-то посещает / сайт, он будет автоматически перенаправлен на /home , как и раньше.

Однако обратите внимание, что это не будет работать при рендеринге сервера, потому что навигация происходит в React.useEffect() .

Посмотрите на перенаправления в React Router версии 6 для получения более подробной информации.

Вот что сказали команды react-router-dom по поводу перенаправлений, когда это удалило этот API в версии 6: https://github.com/remix-run/react-router/blob/main/docs/upgrading/reach.md#redirect-redirectto-isredirect

v6.2.* Просто добавьте маршрут с путем к *

 <Routes>
  <Route path="/" element={<App />}>
    <Route path="expenses" element={<Expenses />} />
   
    <Route
      path="*"
      element={
        <main style={{ padding: "1rem" }}>
          <p>There's nothing here!</p>
        </main>
      }
    />
  </Route>
</Routes>
 

Официальный документ