web-dev-qa-db-de.com

Vorteile des dynamischen gegenüber dem statischen Routing in React

Ich lese über statisches vs dynamisches Routing in React Router, und ich kämpfe darum, die Vorteile des letzteren herauszufinden (und warum v4 sich dafür entschieden hat) Ich kann den Vorteil erkennen, alle Routen für eine Anwendung (statisch) sowie die Komponente, der jede Route zugeordnet ist, aufzulisten, sodass Sie verfolgen können, was unter einer bestimmten URL gerendert werden würde ein klarer Vorteil für dynamische Routen.

Wenn überhaupt, kann ich nur Nachteile erkennen, da es keine eindeutige Methode gibt, um festzustellen, welchem ​​Status eine URL zugeordnet wird, ohne beim Root-App-Element zu beginnen und sich durch die Routen zu arbeiten (obwohl ich mich möglicherweise irre).

Welche Situationen adressiert dynamisches Routing? Warum ist statisches Routing vorzuziehen (möglicherweise speziell in React apps)?

20

Dynamisches Routing

Vom reaktionsrouter docs :

Wenn wir dynamisches Routing sagen, meinen wir Routing, das stattfindet, während Ihre App wiedergibt, nicht in einer Konfiguration oder Konvention außerhalb von eine laufende App.

Stellen Sie sich Routen als Komponenten vor

Die früheren Versionen von react-router (Vor v4) hatten statische Routen. Dies führte zu einem zentralen Routing in Apps wie:

<Router>
    <Route path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route onEnter={verifyUser} path='profile' component={Profile} />
      ...
    </Route>
</Router>

Dies ist jedoch nicht genau die Reaktionsweise Art, Dinge zu tun. React konzentriert sich auf die Komposition mit komponentenbasierter Logik. Anstatt unsere Routen als statisches System zu betrachten, können wir sie uns als Komponenten vorstellen dahinter.

Daher können wir Route wie jede andere React) - Komponente verwenden. Dadurch können wir Route - Komponenten hinzufügen, wenn wir verschiedene Komponenten erstellen Auf diese Weise können wir die Routing-Logik mit den Komponenten entkoppeln, die sie benötigen.

Verschachtelungsrouten

Die Komponente About kann alle Routen verarbeiten und Teile der Benutzeroberfläche basierend auf der URL (z. B. /about/job Oder /about/life Usw.) bedingt rendern.

Eine andere zu beachtende Sache ist, dass eine Route - Komponente entweder die Komponente für eine passende Route oder null rendert. Beispiel: Mit dem folgenden Befehl Route wird die Komponente About für eine Route /about Und null (oder nichts anderes) gerendert.

<Route path='about' component={About} />

Dies ähnelt auch der Vorgehensweise zum bedingten Rendern von Komponenten in React:

route === '/about' ? <About /> : null

Wenn wir nun einige andere Komponenten innerhalb der About -Komponente für Routen /about/job Oder /about/life Rendern müssen, können wir dies folgendermaßen tun:

const About = ({ match ) => (
    <div>
        ...
        <Route path={`${match.url}/job`} component={Job} />
        <Route path={`${match.url}/life`} component={Life} />
    </div>
)

Dynamische Importe und Code-Aufteilung

Persönlich habe ich auch festgestellt, dass dieser Ansatz für mich besser funktioniert, wenn ich dynamische Importe mit Codeteilung verwende, da ich jeder meiner Komponenten dynamische Routen hinzufügen kann. Beispielsweise,

import Loadable from 'react-loadable';

const Loading = () => (
    <div />
);

const Job = Loadable({
    loader: () => import('./Job'),
    loading: Loading,
});

const Life = Loadable({
    loader: () => import('./Life'),
    loading: Loading,
});

...

render() {
    return (
        ...
        <Route path={`${match.url}/job`} component={Job} />
        <Route path={`${match.url}/life`} component={Life} />
    )
}

Reaktionsschnelle Routen

Ein weiterer großartiger Anwendungsfall für dynamisches Routing ist das Erstellen von reaktionsschnellen Routen, die in den Reagieren auf Router-Dokumente und einem empfohlenen Lesevorgang ausführlich erläutert werden. Hier ist das Beispiel aus den Dokumenten:

const App = () => (
  <AppLayout>
    <Route path="/invoices" component={Invoices}/>
  </AppLayout>
)

const Invoices = () => (
  <Layout>

    {/* always show the nav */}
    <InvoicesNav/>

    <Media query={PRETTY_SMALL}>
      {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
          </Switch>
        // large screen does!
        : <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            <Redirect from="/invoices" to="/invoices/dashboard"/>
          </Switch>
      }
    </Media>
  </Layout>
)

Wenn Sie docs zusammenfassen, werden Sie feststellen, wie einfach und aussagekräftig es wird, das Redirect mit dynamischem Routing zu großen Bildschirmgrößen hinzuzufügen. In solchen Fällen wäre die Verwendung des statischen Routings ziemlich umständlich und es würde erforderlich sein, alle Routen an einem einzigen Ort zu platzieren. Dynamisches Routing vereinfacht dieses Problem, da die Logik jetzt komponierbar ist (wie Komponenten).

Statisches Routing

Es gibt einige Probleme, die mit dynamischem Routing nicht einfach zu lösen sind. Ein Vorteil von statisches Routing besteht darin, dass Routen vor dem Rendern überprüft und abgeglichen werden können. Daher erweist es sich insbesondere auf der Serverseite als nützlich. Das React Router-Team arbeitet auch an einer Lösung namens react-router-config , aus der Folgendes hervorgeht:

Mit der Einführung von React Router v4 gibt es keine zentralisierte Routenkonfiguration mehr. In einigen Anwendungsfällen ist es hilfreich, alle potenziellen Routen der App zu kennen, beispielsweise:

  1. Laden von Daten auf den Server oder in den Lebenszyklus, bevor der nächste Bildschirm angezeigt wird
  2. Verknüpfen mit Routen nach Namen
  3. Statische Analyse

Hoffe, dass dies eine gute Zusammenfassung von Dynamic Routing und Static Routing und den Anwendungsfällen für sie bietet :)

12

Laut den React-Router-Dokumenten:

Wenn wir dynamisches Routing sagen , meinen wir das Routing, das beim Rendern Ihrer App stattfindet, nicht in einer Konfiguration oder Konvention außerhalb einer laufenden App. Das heißt, fast alles ist eine Komponente in React Router.

Es ist klar für die Erklärung, dass alle Ihre Routen nicht zu Beginn Ihrer Anwendung initialisiert werden,

In React-Router v3 oder niedriger wurden statische Routen und alle verwendet Routen wurden auf der obersten Ebene initialisiert, und die Verschachtelung wurde wie folgt ausgeführt

<Router>
    <Route path='/' component={App}>
      <IndexRoute component={Dashboard} />
      <Route path='users' component={Users}>
          <IndexRoute component={Home}/>
          <Route path="users/:id" component={User}/> 
      </Route>
    </Route>
</Router>

Mit diesem API-Setup hat der React-Router Teile von React (Lebenszyklen und mehr) neu implementiert und es stimmte einfach nicht mit der Kompositionslogik überein, die React für die Verwendung empfiehlt.

Mit Dynamic Routes werden die folgenden Vorteile vorausgesehen

Verschachtelte Routen

Verschachtelte Routen mit dynamischem Routing ähneln eher

const App = () => (
    <BrowserRouter>
        {/* here's a div */}
        <div>
        {/* here's a Route */}
        <Route path="/todos" component={Todos}/>
        </div>
    </BrowserRouter>
)

// when the url matches `/todos` this component renders
const Todos  = ({ match }) => (
    // here's a nested div
    <div>
        {/* here's a nested Route,
            match.url helps us make a relative path */}
        <Route
        path={`${match.path}/:id`}
        component={Todo}
        />
    </div>
)

Im obigen Beispiel wird nur dann, wenn/todos mit dem Routenpfad übereinstimmt, die Todo-Komponente bereitgestellt und nur dann der Routenpfad /todos/:id Definiert.

Reaktionsschnelle Routen

Die Dokumentation zu React-Router bietet hierfür einen guten Anwendungsfall.

Stellen Sie sich vor, ein Benutzer navigiert zu /invoices. Ihre App ist an verschiedene Bildschirmgrößen anpassbar, sie haben ein schmales Ansichtsfenster und Sie zeigen ihnen nur die Liste der Rechnungen und einen Link zur Rechnung dashboard. Sie können von dort aus tiefer navigieren.

Auf einem großen Bildschirm befindet sich die Navigation jedoch links und das Dashboard oder bestimmte Rechnungen werden rechts angezeigt.

und daher ist /invoices keine gültige Route für einen großen Bildschirm und wir möchten zu /invoices/dashboard umleiten. Dies kann vorkommen, wenn der Benutzer sein Telefon von einem portait to a landscape mode Dreht. Dies kann einfach mit dynamischem Routing durchgeführt werden

const Invoices = () => (
  <Layout>

    {/* always show the nav */}
    <InvoicesNav/>

    <Media query={PRETTY_SMALL}>
      {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
          </Switch>
        // large screen does!
        : <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            <Redirect from="/invoices" to="/invoices/dashboard"/>
          </Switch>
      }
    </Media>
  </Layout>
)

Wenn Sie dynamische Routen mit React Routern verwenden, denken Sie an components und nicht an statische Routen.

Code-Aufteilung

Eine großartige Funktion des Webs ist, dass unsere Besucher nicht die gesamte App herunterladen müssen, bevor sie sie verwenden können. Sie können sich das Aufteilen von Code so vorstellen, dass die App inkrementell heruntergeladen wird. This is made possible with Dynamic Routing.

Dies hat den Vorteil, dass der gesamte Code nicht sofort heruntergeladen werden muss und das anfängliche Rendern somit beschleunigt wird.

Hier ist ein guter Artikel, mit dem Sie Up CodeSplitting für Ihre Anwendung einrichten können

Composable Authenticated Routes schreiben

Mit Dynamic Routing ist es auch einfacher geworden, PrivateRoutes (ein HOC, das die Authentifizierung durchführt) zu schreiben, mit denen Benutzer authentifiziert und ihnen Zugriff auf bestimmte Routen und Umleitungen gewährt werden können. Dieser Aufruf hat mich alle sehr generisch gemacht

Eine typische private Route würde so aussehen

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      fakeAuth.isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

und kann als verwendet werden

<PrivateRoute path="/protected" component={Protected} />
4
Shubham Khatri