反应: “重定向”不是从“反应-路由器-域”导出的

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

尝试导入错误: “ Redirect”没有从“ response-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",
193812 次浏览
小开

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

来自 反应路由器文件:

V5中的 <Redirect>元素不再作为 路由配置(在 a 中)。这是由于即将在 过程中更改路由器状态是不安全的 如果你需要立即重定向，你可以选择 a) 在你的服务器上(可能是最好的解决方案)或者 b)渲染一个 路由组件中的 <Navigate>元素 导航将发生在 useEffect。

如果要使用 Redirect组件，则必须使用反应路由器版本5。

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

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


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

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

小开

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

小开

您不能使用 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
小开
最佳答案

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

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 是路由器定义的 jn response-router 版本5和当前 response-router 版本6，所以这个也不会显示 您使用的版本5与交换机和重定向或路由器和版本6

小开

嗨，我记得有一个叫 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>
);
}

出口默认应用程序;

用途导航的文档

小开

重定向组件已经从反应路由器版本6中删除，对于反应路由器版本6，只需将重定向替换为导航即可

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

把 Redirect转换成 Navigate，就可以了。

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

在反应路由器 -dom 版本 5.x.x > 6中，我们可以使用 <Redirect />

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


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

在反应路由器 -dom 版本 5.x.x < 6中，我们可以使用 <Navigate />

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


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

提交答案