대응: '리다이렉트'는 'react-router-dom'에서 내보내지 않습니다.

대응: '리다이렉트'는 'react-router-dom'에서 내보내지 않습니다.

행음 i i i 、 음음 、 류 i 、 i i 、 。npm run start터미널에 있습니다.

Import 시도 오류: '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;

제 사진이 .package.jsonImport:

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

★★★의 react-router-dom v6, "v6"을 바꿉니다.RedirectNavigate

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

리다이렉트가 v6에서 삭제되었습니다.[ Redirect ]를 [Navigate]으로 대체할 수 있습니다.

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

Redirect되었습니다.react-router§ 6

리액트 라우터 문서에서:

<Redirect>로서 서포트되지 않게 ( v5 의 경우( 「」)는 없습니다.이는 Respect가 변경됨에 따라 초기 렌더링 중에 라우터 상태를 변경할 수 없게 되었기 때문입니다. 할 a)도 있고이 있다), b) 렌더링을 할 수도 .<Navigate>루트 컴포넌트에 포함되어 있습니다.은 ,, 비, 비, 비, 비, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, useEffect.

---

「 」를 사용하고 Redirect 51을 .

또는 리액트 라우터 v6에서 Navigate 컴포넌트를 사용할 수도 있습니다.a<Navigate>됩니다.

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

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

★★★★★★NavigateuseNavigate 훅을 둘러싼 컴포넌트 래퍼입니다.이 후크를 사용하여 루트를 프로그래밍 방식으로 변경할 수 있습니다.

리다이렉트는 v6에서 삭제되었지만 지금 바로 수행할 수 있습니다.

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

하면 안 요.Redirect되어 .react-router-dom§ 6

하시면 됩니다.react-router-dom.22. 4.2.2.을 사용하다

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

또는

yarn add react-router-dom@4.2.2

리액트 라우터 버전 6에서 리다이렉트 구성 요소가 제거되었습니다. 리액트 라우터-dom v6의 경우 리다이렉트를 탐색으로 바꾸면 됩니다.

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

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

RedirectNavigate될 될 거예요.

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

6. ''' 해야 합니다.X로 하다useNavigate.

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>

    );

안녕하세요, useHistory라는 훅이 있었던 것을 기억합니다.이 훅은 아직 존재합니다.이 훅은 몇 가지 변경 사항만 있어 useNavigate로 이름이 변경되었습니다.이것을 사용하고, 문서의 몇개의 예를 따라서, 보호되고 있는 루트에 대해서 다음의 재작업을 실시했습니다.

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;

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

기본 앱 내보내기;

사용 설명서내비게이션

에서 되어 있기 v6대체 수단으로 사용할 수 있습니다.

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

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" /> }

실제로 스위치와 리다이렉트는 jn 리액트라우터 버전5 및 현재 리액트라우터 버전6으로 정의되어 있습니다.따라서 스위치와 리다이렉트 또는 라우터와 함께 버전5를 사용했다고 하는 것은 아닙니다.

언급URL : https://stackoverflow.com/questions/63690695/react-redirect-is-not-exported-from-react-router-dom