在 react-router-dom 中找不到导出重定向 [已修复]

在 react-router-dom 中找不到导出重定向（导入为重定向）

Export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom’

要解决错误“export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom’”，请使用组件代替Navigate，Redirect例如
<Navigate to="/dashboard" replace={true} />。

组件Navigate在呈现时更改当前位置。

在反应路由器 dom 中找不到导出重定向

应用程序.js


import React from 'react';
// 👇️ import Navigate instead of Redirect
import {Navigate} from 'react-router-dom';

export default function App() {
  const user = {id: 1, name: 'James Doe'};

  return (
    <div>
      {user && <Navigate to="/dashboard" />}
    </div>
  );
}

在 React Router 版本 6 中，该Redirect组件被替换为
Navigate.

Navigate渲染组件时，它会更改当前位置。

该组件是挂钩的包装器useNavigate，使我们能够以编程方式导航。

应用程序.js


// 👇️ import useNavigate
import {useNavigate} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 👇️ navigate programmatically
    navigate('/about');
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

您还可以将Navigate组件作为elementprop传递Route。

应用程序.js


import React from 'react';
import {
  Navigate,
  Route,
  Routes,
} from 'react-router-dom';

export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Navigate to="dashboard" />} />
      </Routes>
    </div>
  );
}

该Navigate组件还采用了一个replace道具，它允许我们替换历史堆栈中的当前条目。

应用程序.js


import React from 'react';
// 👇️ import Routes instead of Switch 👇️
import {Navigate} from 'react-router-dom';

export default function App() {
  const user = {id: 1, name: 'James Doe'};

  return (
    <div>
      {user && <Navigate to="/dashboard" replace={true} />}
    </div>
  );
}

当replaceprop 设置为时true，历史堆栈中的当前条目将被新条目替换。

换句话说，导航到新路由不会将新条目推送到历史堆栈中，因此如果用户单击后退按钮，他们将无法导航到上一页。

这很有用，例如，当用户登录时 – 您不希望他们能够单击后退按钮并返回到登录页面。

或者，如果您有一条重定向到不同页面的路线
。然后您不希望用户单击后退按钮并再次重定向。