重定向组件已从react-router版本6中移除。

来自react路由器文档:

不再支持<重定向v5中的>元素作为您的 路由配置(在a内)。这是由于即将发生的变化 进程期间更改路由器状态是不安全的 最初的渲染。如果你需要立即重定向，你可以选择a) 在你的服务器上(可能是最好的解决方案)还是b)渲染a <在路由组件中导航>元素。但是，要认识到 导航将发生在useEffect中。

如果你想使用重定向组件，你将不得不使用react路由器版本5。

或者，你也可以使用react路由器v6中的导航组件。<Navigate>元素在呈现时改变当前位置

import { Navigate } from "react-router-dom";

return (
  <Navigate to="/dashboard" replace={true} />
)

注意:Navigate是一个围绕useNavigate钩子的组件包装。您可以使用此钩子以编程方式更改路由。

版本6。X你必须使用钩子useNavigate。

你不能使用Redirect组件，因为它已经从react-router-dom版本6中删除了。

你可以使用react-router-dom 4.2.2版本。只需使用下面的代码来安装它。

npm install --save react-router-dom@4.2.2

or

yarn add react-router-dom@4.2.2

对于react-router-dom v6，只需将Redirect替换为Navigate

import { Navigate } from 'react-router-dom';
.
.
.
{ component: () => <Navigate to="/404" /> }

因为它在v6中被删除了，所以您可以使用它作为替代。

<Route path="*" element={<NotFound />} />

重定向已经从v6中删除，但你现在可以这样做:

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

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

return (
            <Routes>
                <Route path='/products/:id' element={<Store/>} />

                 //replace Redirect with Navigate
                <Route path="*" element={<Navigate to ="/products" />}/>
            </Routes>

    );

实际上，switch和redirect是react-router version 5和当前react-router version 6定义的路由器，所以这也不会是word 你使用版本5的交换机和重定向或路由器和版本6的to

嗨，我记得有一个钩子叫useHistory，这个钩子仍然存在，这只有一些变化，并被重命名为usenavate。使用这个，并遵循文档中的一个例子，我为我的受保护路由做了这样的返工:

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../../contexts/AuthContext";

function ProtectedRoutes({ component: Component }, props) {
  const [loading, setLoading] = useState(true);

  const { currentUser } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (currentUser) {
      setLoading(false);
      return;
    }
    navigate("/");
  }, []);

  return <>{loading ? "Loading..." : <Component {...props} />} </>;
}

export default ProtectedRoutes;

在我的Routes中是这样使用的:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import AuthFirebaseHelper from "./helpers/AuthFirebaseHelper/AuthFirebaseHelper";
import ProtectedRoutes from "./helpers/ProtectedRoutes/ProtectedRoutes";
import Dashboard from "./components/Dashboard";
import Home from "./components/Home";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/authentication" element={<AuthFirebaseHelper />}></Route>
        <Route path="/" exact element={<Home />}></Route>
        <Route
          path="/restricted"
          element={<ProtectedRoutes component={Dashboard} />}
        ></Route>
      </Routes>
    </Router>
  );
}

导出默认App;

usenavnavigation的文档

重定向组件已从react-router版本6中删除，对于react-router-dom v6，只需将重定向替换为导航

import { Navigate } from 'react-router-dom';

<Routes>
<Route path="/login" element={isLogin ? <Navigate to="/" /> : <Login />}/>
</Routes>

重定向已从v6中移除。 你可以用导航代替重定向。

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from 'react-router-dom';
import Home from '../home/Home';

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

切换重定向到导航，它将工作。

<Route path='/' exact>
   <Navigate to={`/documents/${uuidV4()}`} />
</Route>

在react-router-dom版本5.x中。我们可以使用<Redirect /> . x > 6

import { Redirect } from 'react-router-dom';

{ component: () => <Redirect to="/dashboard" /> }

在react-router-dom版本5.x中。x < 6我们可以使用<Navigate />

import { Navigate } from 'react-router-dom';

{ component: () => <Navigate to="/dashboard" /> }