React：“重定向”不是从“react-router-dom”导出的

IT技术 javascript reactjs react-router react-router-dom
2021-03-27 02:58:24

我在终端中Attempted import error: 'Redirect' is not exported from 'react-router-dom'.运行时得到了npm run start。

我重新安装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",

任何帮助表示赞赏，谢谢。

6个回答

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

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

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

来自 react-router 的 github：

重定向（以及 useRoutes 中的 redirectTo）已被移除。

我们不再支持在初始渲染时重定向，因为与未来版本的 React 的兼容性问题 React 不允许我们在初始渲染时更改祖先组件中的状态，但没有警告，因此我们不得不删除该组件，因为以及在初始渲染上执行导航（）的能力。您仍然可以渲染 ，但在下一次渲染之前它实际上不会更新页面。

有关更多详细信息，请参阅： react-router v6.0.0-alpha.3

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

或者，您可以使用react router v6 中的Navigate组件。

Redirectreact-router-dom v 6 的替代方案是Navigate. 例如： - <Redirect to='/' />以<Navigate replace to="/" /> 参考链接：reactrouter.com/docs/en/v6/api#navigate
2021-05-28 02:58:24

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

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

您可以使用react-router-dom4.2.2 版。只需使用下面的代码来安装它。

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

或者

yarn add react-router-dom@4.2.2

祝你有美好的一天。

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

<Route path="*" element={<Navigate to ="/" />}/>
其它你可能感兴趣的问题
上一篇react propTypes 组件类？ 下一篇在 react-navigation 5 中将函数作为参数传递