React：“重定向”未从“react-router-dom”导出

Question

npm run start在终端中运行时出现以下错误。

尝试导入错误：“重定向”未从“react-router-dom”导出。

我已经重新安装了node_modules，，react-router-dom。react-router还重新启动了终端和我的计算机，但问题仍然存在。

我的代码：

import React from 'react';
import { Switch, Redirect } from 'react-router-dom';

import { RouteWithLayout } from './components';
import { Minimal as MinimalLayout } from './layouts';

import {
  Login as LoginView,
  Dashboard as DashboardView,
  NotFound as NotFoundView
} from './views';

const Routes = () => {
  return (
    <Switch>
      <Redirect
        exact
        from="/"
        to="/dashboard"
      />
      <RouteWithLayout
        component={routeProps => <LoginView {...routeProps} data={data} />}
        exact
        layout={MinimalLayout}
        path="/login"
      />
      <Redirect to="/not-found" />
    </Switch>
  );
};

export default Routes;

这是我的package.json进口：

"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",

Answer 1

对于react-router-domv6，只需替换Redirect为Navigate

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

Answer 2

重定向已从v6中删除。您可以用Navigate替换Redirect。

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>
  );
}

Answer 3

Redirect组件已从react-router版本 6 中删除。

来自反应路由器文档：

<Redirect>不再支持将 v5 中的元素作为路由配置的一部分（在 a 内）。这是由于 React 即将发生的变化，使得在初始渲染期间改变路由器的状态变得不安全。如果您需要立即重定向，您可以a）在您的服务器上执行（可能是最好的解决方案）或b） <Navigate>在您的路由组件中渲染一个元素。但是，请认识到导航将在useEffect.

如果你想使用Redirect组件，则必须使用 React Router 版本 5。

或者，您可以使用React Router v6 中的Navigate组件。元素<Navigate>在渲染时会更改当前位置

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

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

注意：是useNavigateNavigate钩子的组件包装器。您可以使用此挂钩以编程方式更改路由。

Answer 4

重定向已从v6中删除，但您现在可以这样做：

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

Answer 5

您无法使用该Redirect组件，因为它已从react-router-dom版本 6 中删除。

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

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

或者

yarn add react-router-dom@4.2.2

Answer 6

切换Redirect到Navigate，它就会起作用。

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

Answer 7

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

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

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

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

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

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

Answer 8

Redirect组件已从react-router版本6中删除，对于react-router-dom v6，只需将Redirect替换为Navigate

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

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

Answer 9

对于版本 6.X，您必须使用钩子useNavigate。

Answer 10

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>

    );

Answer 11

嗨，我记得有一个名为 useHistory 的钩子，这个钩子仍然存在，只是有一些更改，并被重命名为 useNavigate。使用此示例并遵循文档中的示例之一，我对受保护的路由进行了返工：

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;

在我的路线中，它是这样使用的：

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>
  );
}

导出默认应用程序；

useNavigation的文档