当在终端中运行npm run start时,我得到以下错误。

试图导入错误:'Redirect'没有从'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;

这是我的包裹。json:进口

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

当前回答

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

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

其他回答

重定向组件已从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钩子的组件包装。您可以使用此钩子以编程方式更改路由。

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

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

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

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

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

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

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