Wie kann ich in React Router v6 umleiten?

Ich versuche, auf React Router v6 zu aktualisieren (react-router-dom 6.0.1).

Hier ist mein aktualisierter Code:

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>

Das Letzte Route leitet den Rest der Pfade um /.

Allerdings ist mir ein Fehler unterlaufen

TS2322: Geben Sie ‘{ render: () => Element; }“ kann dem Typ „IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)“ nicht zugewiesen werden. Die Eigenschaft „render“ ist für den Typ „IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)“ nicht vorhanden.

Allerdings basierend auf die Dokumentationhat es render zum Route. Wie kann ich es richtig verwenden?

Ich denke, Sie sollten den No-Match-Route-Ansatz verwenden.

Überprüfen Sie dies in der Dokumentation: Hinzufügen einer „No Match“-Route

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>

Um den Verlauf sauber zu halten, sollten Sie einstellen replace Stütze. Dadurch werden zusätzliche Weiterleitungen vermieden, nachdem der Benutzer zurück geklickt hat.

Ich habe einen anderen Weg gefunden, dies zu tun:

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

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

Sehen Übersicht, Navigation.

Erstellen Sie die Datei 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;
  }
}

Importieren Sie die Komponente, um dem Benutzer einen privaten Router zu benötigen:

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

In Version 5 von React, dh reagieren-router-dom, hatten wir die Umleitungskomponente. Aber in Version 6 von React wird es auf die Navigate-Komponenten aktualisiert.

Wir können Ersetzen in diesen Komponenten übergeben, um unnötige Weiterleitungen beim Klicken auf die Vor- und Zurück-Option zu vermeiden.

Demonstration für die Verwendung ist unten beigefügt:

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

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

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>

    </>)
}

Für Klassenkomponenten sollten Sie zuerst eine funktionale Komponente erstellen und dann HOC technical verwenden, um useNavigate zu verwenden Haken reagieren.

So was:

Datei withrouter.js

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

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

Verwenden Sie es dann in anderen Klassenkomponenten wie folgt:

export default withRouter(Signin);

Und verwenden Sie Requisiten für die Weiterleitung wie folgt:

this.props.navigate("https://stackoverflow.com/");