Aktualisierungen für React Router V6

Inhaltsverzeichnis

ReactRouterV6-Änderungen

1. <Switch> umbenannt in <Routes>
2. Neue Funktionsänderungen von <Route>
3. Verschachteltes Routing wird einfacher

3.1 Die Änderungen im Einzelnen lauten wie folgt:
3.2 Veraltete Weiterleitung in V5
3.3 Mehrere <Routen/>

4. Verwenden Sie useNavigate anstelle von useHistory

5. Neuer Hook useRoutes in Hooks ersetzt react-router-config

Zusammenfassen

Änderungen bei React Router V6

Ich habe die Router-Version 5.x verwendet und plötzlich festgestellt, dass es am Router V6 einige Änderungen gab, die angeblich benutzerfreundlicher für verschachtelte Routen sind. Hier geben wir eine kurze Einführung.

1. <Switch> wurde umbenannt in <Routes>

Bisher war es bei Verwendung eines Routers erforderlich, diesen mit einem Switch zu umschließen, wodurch die Effizienz der Routenanpassung (Einzelanpassung) verbessert werden konnte. In V6 wird diese Komponente der obersten Ebene in „Routen“ umbenannt. Beachten Sie jedoch, dass ihre Funktionalität weitgehend unverändert bleibt.

2. Neue Funktionsänderungen von <Route>

Komponente/Render wird durch Element ersetzt

// Version 5
<Schalter>
    <Routenpfad="/about" component={Über}/>
    <Routenpfad="/home" Komponente={Home}/>
</Schalter>
// Version 6
<Routen>
    <Routenpfad="/about" element={<Über/>}/>
    <Routenpfad="/home" element={<Home/>}/>
</Routen>

3. Verschachtelte Routen vereinfacht

3.1 Die Änderungen im Einzelnen lauten wie folgt:

<Route children> wurde geändert, um untergeordnete Routen zu akzeptieren.
Einfachere Übereinstimmungsregeln als <Route exact> und <Route strict>.
<Routenpfad> Die Pfadhierarchie ist klarer.

Funktion App() {
  zurückkehren (
    <BrowserRouter>
      <Routen>
        <Routenpfad="/" element={<Home />} />
        <Routenpfad="/about" element={<Über/>}>
          <Routenpfad="/about/message" element={<Message/>} />
          <Routenpfad="/about/news" element={<News/>} />
        </Route>
      </Routen>
    </BrowserRouter>
  );
}
Funktion Über() {
  zurückkehren (
    <div>
      <h1>Über</h1>
      <Link to="/about/message">Nachricht</Link>
	  <Link to="/about/news">Neuigkeiten</Link>
        {/*
       Rendert direkt <MyProfile /> oder <OthersProfile /> entsprechend den oben definierten Routing-Parametern
        */}
      <Ausgang />
    </div>
  )
}

Das <Outlet /> entspricht hier einem Platzhalter, der {this.props.children} sehr ähnlich ist und immer mehr wie Vue wird 😎.

3.2 Veraltete Weiterleitung in V5

// Version 5
<Weiterleitung zu="/"/>
// Version 6
<Routenpfad="*" element={<Navigieren zu="/" />}/>

3.3 Mehrere < Routen />

Bisher konnten wir in der React App nur eine Route verwenden. Aber jetzt können wir in der React App mehrere Routen verwenden, was uns hilft, mehrere Anwendungslogiken basierend auf unterschiedlichen Routen zu verwalten.

importiere React von „react“;
importiere {Routen, Route} von „react-router-dom“;
Funktion Dashboard() {
  zurückkehren (
    <div>
      <p>Sehen Sie, noch mehr Routen!</p>
      <Routen>
        <Routenpfad="/" element={<DashboardGraphs />} />
        <Routenpfad="Rechnungen" Element={<InvoiceList />} />
      </Routen>
    </div>
  );
}
Funktion App() {
  zurückkehren (
    <Routen>
      <Routenpfad="/" element={<Home />} />
      <Routenpfad="dashboard/*" element={<Dashboard />} />
    </Routen>
  );
}

4. Verwenden Sie useNavigate anstelle von useHistory

// Version 5
importiere { useHistory } von „react-router-dom“;
Funktion MeinButton() {
  lass Geschichte = useHistory();
  Funktion handleClick() {
    Verlauf.push('/home');
  };
  return <button onClick={handleClick}>Senden</button>;
};
//In Version 6 wird history.push() durch navigation() ersetzt.
importiere { useNavigate } von „react-router-dom“;
Funktion MeinButton() {
  lass navigieren = useNavigate();
  Funktion handleClick() {
    navigieren('/home');
  };
  return <button onClick={handleClick}>Senden</button>;
};

Die Verwendung von Verlauf wird außerdem ersetzt durch:

// Version 5
Verlauf.push('/home');
Verlauf.ersetzen('/home');
// Version 6
navigieren('/home');
navigieren('/home', {ersetzen: true});

5. Neuer Hook useRoutes in Hooks ersetzt react-router-config

Funktion App() {
  let-Element = useRoutes([
    { Pfad: '/', Element: <Home /> },
    { Pfad: 'Dashboard', Element: <Dashboard /> },
    { Pfad: 'Rechnungen',
      Element: <Rechnungen />,
      Kinder: [
        { Pfad: ':id', Element: <Rechnung /> },
        { Pfad: 'gesendet', Element: <SentInvoices /> }
      ]
    },
    // Umleitung { Pfad: 'home', Umleitung zu: '/' },
    // 404 Nicht gefunden { Pfad: '*', Element: <NotFound /> }
  ]);
  Rücklaufelement;
}