javascript 如何使用React Router 6进行404重定向?[副本]

mbzjlibv  于 2023-09-29  发布在  Java
关注(0)|答案(2)|浏览(111)

此问题已在此处有答案

What is the alternative for Redirect in react-router-dom v 6.0.0?(5个答案)
2天前关闭。
在React Router 5中,我可以使用<redirect path='' />,但在React Router 6中已被删除。我想它已经被<Navigate>替换了,但是这会在这个用例中抛出一个安全错误。

t5fffqht

t5fffqht1#

Redirect不再在react-router version 6中。对于react-router-dom v6,您可以使用Navigate而不是Redirect。下面是一个例子:

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

function App() {
    return (
        <>
            <Routes>
                <Route path="/404" element={<div>Page Not Found/div>} />
                <Route path="*" element={<Navigate replace to="/404" />} />
            </Routes>
        </>
    );
}
rryofs0p

rryofs0p2#

截至v6:

  • 删除<Switch>内部的<Redirect>
  • 删除直接位于<Switch>内部的任何<Redirect>元素。
// Change this:
<Switch>
  <Redirect from="about" to="about-us" />
</Switch>

// to this:
<Switch>
  <Route path="about" render={() => <Redirect to="about-us" />} />
</Switch>
  • 不在<Switch>内部的普通元素可以保留。它们将在v6中成为<Navigate>元素。

相关问题