反应：'重定向'不是从'react-router-dom'导出的

Posted 2023-02-21

【中文标题】反应：\'重定向\'不是从\'react-router-dom\'导出的

【英文标题】：React: 'Redirect' is not exported from 'react-router-dom'反应：'重定向'不是从'react-router-dom'导出的

【发布时间】：2020-12-20 17:55:52

【问题描述】：

在终端中运行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",

感谢您的帮助。

【问题讨论】：

为了让每个人都保持警觉，react-router 时不时地破坏与一切的兼容性；）

【参考方案1】：

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

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

【参考方案2】：

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

来自react router docs:

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

---

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

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

import  Navigate  from "react-router-dom";

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

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

【讨论】：

react-router-dom v 6 中 Redirect 的替代品是 Navigate。示例：--<Redirect to='/' /> 到 <Navigate replace to="/" /> 参考链接：reactrouter.com/docs/en/v6/api#navigate

【参考方案3】：

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

【参考方案4】：

您不能使用 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

祝你有美好的一天。

【参考方案5】：

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

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

【参考方案6】：

重定向已从 v6 中移除。 您可以将 Redirect 替换为 Nevigate。

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

【参考方案7】：

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>

【参考方案8】：

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>

    );

【参考方案9】：

由于它已在 v6 中删除，您可以使用它作为替代。

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

【参考方案10】：

实际上切换和重定向是在 react-router 版本 5 和当前 react-router 版本 6 中定义的路由器，所以这也不会说 您将第 5 版与交换机和重定向或路由器一起使用，而将 to 与第 6 版一起使用

【参考方案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 的文档