logo标签列表

React：'Redirect'未从'react-router-dom'导出

javascriptreactjsreact-routerreact-router-dom
249

当我在终端运行npm run start时，出现以下错误：

尝试导入错误：从 'react-router-dom' 未导出 'Redirect'。

我已重新安装了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",
8
为了让每个人都保持警觉，react-router 偶尔会与所有东西的兼容性断开 ;) - Evert
14个回答
377

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

import { Navigate } from 'react-router-dom';
.
.
.
{ component: () => <Navigate to="/404" /> }
1
Navigate 的文档称它是 useNavigate 的包装器，后者的文档页面上写着：“重要提示：在加载程序和操作中使用 redirect 要比使用此钩子更好。” 这就是主要内容（6.4.3）。那么这些文档错误吗？ - Sigfried
@Sigfried redirect 的文档说明它相当于使用 302 状态更改路由。因此，它不能用于导航应用程序。 - ritz
谢谢。在调试其他问题时，使用 <Navigate /> 会让我感到困扰，有时返回 <Navigate... /> 的组件在 URL 更改之前会重新渲染一两次。无论如何，我已经修复了这个 bug，把这个烦恼藏起来了。 - Sigfried
100

重定向已从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>
  );
}
40

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

来自react router文档:

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

如果要使用Redirect组件，必须使用react router v5。

或者，可以使用来自react router v6的Navigate组件。当呈现<Navigate>元素时，当前位置会发生更改。

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

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

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

4
在React Router v6中，替代Redirect的方法是使用Navigate。例如： <Redirect to='/' /> 改为 <Navigate replace to="/" />参考链接：https://reactrouter.com/docs/en/v6/api#navigate - Jai Saravanan
16

在 v6 中移除了重定向，但是你现在可以像这样做：

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

由于已从react-router-dom版本6中移除了Redirect组件，因此您无法使用它。

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

npm install --save react-router-dom@4.2.2
或者
yarn add react-router-dom@4.2.2
11

将Redirect替换为Navigate，它就可以工作。

<Route path='/' exact>
   <Navigate to={`/documents/${uuidV4()}`} />
</Route>
1
当您有多个包含在Routes中的Route时，不能使用。 - Farhad
10
在 react-router-dom 版本 5.x.x > 6 中，我们可以使用 <Redirect />。
import { Redirect } from 'react-router-dom';

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

在 react-router-dom 的版本 5.x.x < 6 中，我们可以使用 <Navigate />。
import { Navigate } from 'react-router-dom';

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

在React-Router版本6中，Redirect组件已被删除，对于React-Router-DOM v6，只需将Redirect替换为Navigate即可。

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

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

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

我认为这只适用于函数组件，对吗？ - the_mackster
5
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>

    );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接