리액트 라우터 v6에서 리다이렉트하려면 어떻게 해야 하나요?

리액트 라우터 v6에서 리다이렉트하려면 어떻게 해야 하나요?

리액트 라우터 v6로 업그레이드하려고 합니다(react-router-dom 6.0.1).

업데이트된 코드는 다음과 같습니다.

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route render={() => <Navigate to="/" />} />
  </Routes>
</BrowserRouter>

마지막Route나머지 경로를 리다이렉트하고 있다./.

그런데 에러가 났다.

TS2322: '{ render: ( ) = > Element ; }' 이라고 입력하면 'IntrinsicAttributes & ( PathRouteProps | LayoutRouteProps | IndexRouteProps)' 라고 입력할 수 없습니다.'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'타입에 속성 'render'가 존재하지 않습니다.

단, 이 매뉴얼에 근거해 보면, 다음과 같이 되어 있습니다.render위해서Route어떻게 하면 올바르게 사용할 수 있습니까?

no match route 어프로치를 사용하는 것이 좋을 것 같습니다.

메뉴얼로 이것을 확인해 주세요."No Match" 루트 추가

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route
        path="*"
        element={<Navigate to="/" replace />}
    />
  </Routes>
</BrowserRouter>

이력을 깨끗하게 유지하려면 , 다음의 설정을 실시할 필요가 있습니다.replace이렇게 하면 사용자가 다시 클릭한 후 추가적인 리디렉션을 피할 수 있습니다.

다른 방법을 찾았습니다.

import { useNavigate } from "react-router-dom";
let navigate = useNavigate();

useEffect(() => {
   if (LoggedIn){
      return navigate("/");
   }
},[LoggedIn]);

개요, 탐색을 참조하십시오.

RequireAuth.tsx 파일을 만듭니다.

import { useLocation, Navigate } from "react-router-dom";
import { useAuth } from "../hooks/Auth";

export function RequireAuth({ children }: { children: JSX.Element }) {
  let { user } = useAuth();
  let location = useLocation();

  if (!user) {
    return <Navigate to="/" state={{ from: location }} replace />;
  } else {
    return children;
  }
}

사용자에게 개인 라우터가 필요한 컴포넌트를 Import합니다.

import { Routes as Switch, Route } from "react-router-dom";

import { RequireAuth } from "./RequireAuth";
import { SignIn } from "../pages/SignIn";
import { Dashboard } from "../pages/Dashboard";

export function Routes() {
  return (
    <Switch>
      <Route path="/" element={<SignIn />} />
      <Route
        path="/dashboard"
        element={
          <RequireAuth>
            <Dashboard />
          </RequireAuth>
        }
      />
    </Switch>
  );
}

리액트 버전5에서는 리액트 라우터돔에 리다이렉트 컴포넌트가 포함되어 있습니다.그러나 React 버전 6에서는 탐색 구성 요소로 업데이트됩니다.

이러한 컴포넌트에서는 [뒤로]와 [앞으로]를 클릭했을 때 불필요한 리다이렉트를 회피할 수 있습니다.

사용 예시는 아래에 첨부합니다.

<Route  path="/" element={user ? <Home /> : <Register />} />
<Route path="/login" element={user ? <Navigate to="/" replace /> :  <Login />}  />
<Route path = "/register" element={user ? <Navigate to="/" replace /> :  <Register />} />

      <BrowserRouter>
        <Routes>
          <Route path="home" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route index element={<Navigate to="/home" replace />} />
        </Routes>
      </BrowserRouter>

리액트 라우터 버전 6의 경우

편집 후의 새로운 예----->(보다 읽기 쉬운 예)

import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';
import Home from '../NavbarCompo/About';
import Contact from '../NavbarCompo/Contact';
import About from '../NavbarCompo/About';
import Login  from '../NavbarCompo/Login';
import Navbar from '../Navbar/Navbar';
import Error from '../pages/error';
import Products  from '../pages/products';
import Data from '../NavbarCompo/Data';

const Roter=()=>{
    return (
    <Router>

            <Navbar />
        <Routes>
            
            <Route path='/' element={<Home />} />
            <Route path='/about' element={<About />} />
            <Route path='/contact' element={<Contact />} />
            <Route path='/login' element={<Login />} />
            <Route path='/product/:id' element={<Products />} />
            <Route path='/data' element={<Data />} />
            <Route path ='*' element={<Error />} />
        </Routes>


    </Router>
    )
}
export default Roter;

예를 보세요.

import React from "react";
import Form from "./compo/form";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Route,Routes,Navigate } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Form />
  },
  {
    path: "/about",
    element: <h1>hola amigo,you are in about section</h1>
  },
  {
    path:"*",
    element:<Navigate to="/" replace />
  }
]);

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

이것 좀 봐 https://reactrouter.com/en/main/start/overview

import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material";

const component =()=>{

    const navigate = useNavigate();

    const handelGoToLogin = () => {
        navigate('/auth/login')
    }

    return(<>
        //.........
    
        <Button onClick={handelGoToLogin} variant="outlined" color="primary" size="large" fullWidth>
             Back
        </Button>

    </>)
}

import { useState } from "react"
import { Navigate } from "react-router-dom"
const [login, setLogin] = useState(true)
return (<>
{!login && <Navigate to="/login" />}
<>)

클래스 구성요소의 경우 먼저 기능 구성요소를 만든 다음 HOC 기술을 사용하여 반응 후크를 사용해야 합니다.

다음과 같이 합니다.

router.js를 사용하여 파일을 만듭니다.

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

export const withRouter = WrappedComponent => props => {
    return (<WrappedComponent {...props} navigate={useNavigate()}/>);
};

그런 다음 다음과 같은 다른 클래스 구성 요소에서 사용합니다.

export default withRouter(Signin);

리다이렉트에는 다음과 같은 소품을 사용합니다.

this.props.navigate('/');

언급URL : https://stackoverflow.com/questions/69868956/how-can-i-redirect-in-react-router-v6