Aktualisierungen in React Router v6

Update im Header React-Router v6

React Router ist eine leistungsstarke Routing-Bibliothek, die auf React basiert und es Ihnen ermöglicht, Ansichten und Datenflüsse schnell zu Ihrer Anwendung hinzuzufügen und gleichzeitig Seiten und URLs synchron zu halten

import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';

1. Schalter umbenannt in Routen

Routes ist eine aktualisierte Version der vorherigen Switch-Komponente, die Funktionen wie relatives Routing und Links, automatisches Routing-Ranking, verschachteltes Routing und Layout enthält

2. Neue Funktionen der Route

Verantwortlich für das Rendern der Benutzeroberfläche der React-Komponente. Das Pfadattribut darin stimmt immer mit der aktuellen URL überein. Das zweite erforderliche Attribut heißt Element. Wenn es auf die aktuelle URL trifft, teilt es der Route-Komponente mit, welche React-Komponente gerendert werden soll. Das Element Hier ist v6 Neu hinzugefügt, ersetzen Sie das Attribut der Komponente in v5

import Children from './Children';
// v5
<Route path=":id" component={Children} />
<Route
  path=":id"
  render={routeProps => (
    <Profile routeProps={routeProps} />
  )}
/>
// v6
<Route path=":userId" element={<Profile />} />

3. Routing-Verschachtelung ist einfacher, neue API: Outlet

Dies ist sehr wichtig.Wenn das Routing verschachtelt ist, wird allgemein angenommen, dass ein bestimmter Teil der Webseite unverändert bleibt und sich nur Unterteile der Webseite ändern

In v5 müssen verschachtelte Routen klar definiert werden, was in v6 nicht der Fall ist. Er wählt ein optimales Element namens Outlet aus der React Router-Bibliothek aus und rendert alle passenden untergeordneten Elemente für eine bestimmte Route

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="new" element={<New/>}>
          <Route path=":id" element={<List/>} />
          <Route path="me" element={<Others/>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function New() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>
        {/*
       将直接根据上面定义的不同路由参数，渲染<MyProfile />或<OthersProfile />
        */}
      <Outlet/>
    </div>
  )
}

4.verwenden Sie Navigieren

useNavigate ersetzt useHistory, useNavigate speichert die Routing-Informationen nicht in useHistory und erhält Routing-Informationen über useLocation

// v5
history.push('/new')
history.replace('/new')
history.go(-1)

// v6
navigate('/new')
navigate('/new', {replace: true})
navigate(-1)

5.Routen verwenden

function App() {
  let element = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'dashboard', element: <Dashboard /> },
    { path: 'invoices',
      element: <List />,
      children: [
        { path: ':id', element: <List /> },
        { path: 'new', element: <New /> }
      ]
    },
    // 重定向
    { path: 'home', redirectTo: '/' },
    // 404找不到
    { path: '*', element: <NotFound /> }
  ]);
  return element;
}

6. Alle Pfadübereinstimmungen in v6 ignorieren das „/“ am Ende der URL, und „strict“ in „Route“ wurde in v6 gelöscht

// v5 之前存在的路由歧义
1.当前路径'/users'，则<Link to='me'>将跳转<a href='/me'>
2.当前路径'/users/'，则<Link to='me'>将跳转<a href='/users/me'>

// v6修复了这种歧义
1.当前路径'/users'，则<Link to='me'>将跳转<a href='/users/me'>
2.当前路径'/users'，则<Link to='../me'>将跳转<a href='/me'>

// 像命令行中cd的用法
当前路径为 /app/dashboard
<Link to='stats'>			// <a href='/app/dashboard/stats'>
<Link to='../stats'>		// <a href='/dashboard/stats'>
<Link to='../stats'>		// <a href='/stats'>
<Link to='../../../stats'>		// <a href='/stats'>

7. Behalten Sie useParams und useLocation in v5 bei

8. Es gibt kein withRouter in v6, aber es wird in vielen Fällen in Klassenkomponenten verwendet

const withRouter = Component => {
  const ComponentWithRouterProp = props => {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={
   
   {location, navigate, params}}
      />
    );
  };

  return ComponentWithRouterProp;
};