Wie kann ich in React Router v6 umleiten?

Lesezeit: 2 Minuten

Benutzer-Avatar
Hongbo Miao

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 der Arzthat es render zum Route. Wie benutzt man es richtig?

  • Das sieht nach einem Fehler in der Dokumentation aus. Beachte wie direkt im Abschnitt darüber sie verwarfen render zugunsten von children? Aber es sieht so aus, als ob der Abschnitt, in dem Sie Gespräche über das Upgrade von v5 auf v5.1 gelesen haben, nur entfernt wurde render in v6. Sieht aus wie <Route element={<Navigate to="/" />} /> ist der neue Stil.

    – Bergi

    7. November 2021 um 1:40 Uhr

  • gist.github.com/mjackson/…

    – Bergi

    7. November 2021 um 1:44 Uhr

  • Auch von gist.github.com/mjackson/…: “Wenn Sie endlich ein Upgrade auf v6 durchführen, konvertieren Sie <Route render={() => ...}> zu <Route element={...}> und du bist fertig.

    – Bergi

    7. November 2021 um 1:48 Uhr

  • Dank @Bergi gelingt mir ein kleines Update: <Route path="*" element={<Navigate to="/" />} />gerne als Antwort posten!

    – Hongbo Miao

    7. November 2021 um 6:06 Uhr

Benutzer-Avatar
Rodolfo Silva

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

Überprüfen Sie dies in der Dokumentation.

https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-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>

Aktualisierung – 18.03.2022

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. Danke @Paul für diesen Tipp.

  • Vielen Dank Bruder. Deine Antwort hat mich gerettet. Eine ganze Woche lang habe ich versucht, den genauen Syntax-Ersatz von render prop in RRD5 zu finden, und nach Tagen der Recherche fand ich schließlich Ihre Antwort. Sehr geschätzt <3

    – Faraz Zaidi

    19. Dezember 2021 um 19:41 Uhr

  • Wenn Sie externe Reaktionskomponenten oder ohne Hooks umleiten möchten, sehen Sie sich diese Antwort an.

    – totymedli

    10. Februar um 6:56 Uhr

  • Es ist besser zu verwenden <Navigate to="/" replace />andernfalls wird dem Verlauf ein neuer Eintrag hinzugefügt und wenn Sie versuchen, zurück zu navigieren, werden Sie erneut umgeleitet, sodass Sie stecken bleiben.

    – Paulus

    18. März um 13:25 Uhr

  • Danke @Paul, macht Sinn, ich werde die Antwort aktualisieren.

    – RodolfoSilva

    18. März um 13:49 Uhr

  • @KashifAli In diesem Fall sollten Sie die Navigationskomponente durch Ihren benutzerdefinierten Not Found-Bildschirm ersetzen. Ich glaube nicht, dass Sie beide einen Platzhalterpfad verwenden können. Sie können jedoch einen verschachtelten Ansatz verwenden, um einzuschränken, wann der Benutzer innerhalb eines bestimmten Pfads umgeleitet werden soll.

    – RodolfoSilva

    16. Juni um 18:00 Uhr

Ich habe einen anderen Weg gefunden, dies zu tun:

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

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

https://reactrouter.com/docs/en/v6/getting-started/overview#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>
  );
}

  • Perfekte Lösung, danke!

    – kblst

    19. April um 14:01 Uhr

  • Das ist eine gute Lösung. Wrapper-Komponente

    – sagundcode

    Vor 2 Tagen

Benutzer-Avatar
Ayush Nanda

In V5 von reagieren dh. React-Router-Dom hatten wir Redirect-Komponente. Aber in V6 von React wird es aktualisiert, um Komponenten zu navigieren.

Wir können diese Komponenten ersetzen, um unnötige Weiterleitungen beim Klicken auf die Option „Zurück“ und „Weiter“ 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" />}
<>)

Benutzer-Avatar
Joundill

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>

    </>)
}

Benutzer-Avatar
Ali Alizadeh

Für Klassenkomponenten sollten Sie zuerst eine funktionale Komponente erstellen und dann HOC Technical verwenden, um useNavigate React Hook zu verwenden. so was:

mitrouter.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/");

1226330cookie-checkWie kann ich in React Router v6 umleiten?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy