Aktualisierungen für React Router V6

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

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

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

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

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

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

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