React: 'Redirect'没有从' React -router-dom'中导出

当在终端中运行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",

当前回答

切换重定向到导航，它将工作。

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

2022-04-07 09:26:13

其他回答

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

2021-12-02 03:12:59

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

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

2021-11-15 14:46:24

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

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

2021-11-15 13:42:57

切换重定向到导航，它将工作。

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

2022-04-07 09:26:13

嗨，我记得有一个钩子叫useHistory，这个钩子仍然存在，这只有一些变化，并被重命名为usenavate。使用这个，并遵循文档中的一个例子，我为我的受保护路由做了这样的返工:

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;

在我的Routes中是这样使用的:

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

导出默认App;

usenavnavigation的文档

2021-12-09 14:56:19

React: 'Redirect'没有从' React -router-dom'中导出

推荐文章

最新文章

标签