web-dev-qa-db-fra.com

Avantages du routage dynamique vs statique dans React

Je lis à propos de routage statique vs dynamique dans React Router, et j'ai du mal à identifier les avantages de ce dernier (et pourquoi la v4 a choisi de l'accompagner) Je peux voir l'avantage de répertorier toutes les routes pour une application (statique), ainsi que le composant auquel chaque route mappe, vous permettant de tracer ce qui serait rendu en fonction d'une URL spécifique. Mais je ne vois pas tout avantage clair aux itinéraires dynamiques.

Si quoi que ce soit, je ne peux voir que des inconvénients, car il n'y a pas de moyen clair de voir dans quel état une URL sera mappée, sans commencer par l'élément d'application racine et parcourir les routes (bien que je puisse me tromper).

À quelles situations le routage dynamique répond-il? Pourquoi est-il préférable au routage statique (peut-être spécifiquement dans les applications React))?

reactjsreact-routerreact-router-v4dynamic-routing
20
Andrei Khramtsov

Routage dynamique

Depuis le routeur React docs :

Lorsque nous parlons de routage dynamique, nous entendons le routage qui a lieu lorsque votre application est en train de rendre , pas dans une configuration ou une convention en dehors d'une application en cours d'exécution.

Considérez les itinéraires comme des composants

Les versions antérieures de react-router (avant v4) avait des routes statiques. Cela a conduit à un routage centralisé dans des applications telles que:

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

Cependant, ce n'est pas exactement la manière de réagir de faire les choses. React se concentre sur la composition en utilisant une logique basée sur les composants. Donc, au lieu d'imaginer nos routes comme un système statique, nous pouvons les imaginer comme des composants, ce qui est ce que apporte react-router v4 et la philosophie principale derrière.

Par conséquent, nous pouvons utiliser Route comme nous utiliserions n'importe quel composant React. Cela nous permet d'ajouter Route composants au fur et à mesure que nous construisons différents composants. Un avantage de ce faisant, nous pouvons découpler la logique de routage aux composants qui en ont besoin.

Itinéraires de nidification

Le composant About peut gérer toutes les routes et rendre conditionnellement des parties de l'interface utilisateur en fonction de l'url (par exemple /about/job ou /about/life etc).

Une autre chose à noter est qu'un composant Route rendra le composant pour une route correspondante ou null. Par exemple, le Route suivant rend le composant About pour une route /about et null (ou rien) sinon.

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

Ceci est également similaire à la façon dont nous sommes habitués au rendu conditionnel des composants dans React:

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

Maintenant, si nous devons rendre d'autres composants à l'intérieur du composant About pour les routes /about/job ou /about/life nous pouvons le faire comme:

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

Importations dynamiques et fractionnement de code

Personnellement, j'ai également trouvé que cette approche fonctionnait mieux pour moi au cas où j'utiliserais des importations dynamiques avec fractionnement de code, car je peux ajouter des itinéraires dynamiques dans n'importe lequel de mes composants. Par exemple,

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

Itinéraires réactifs

Un autre excellent cas d'utilisation pour le routage dynamique est la création de routes réactives qui sont magnifiquement expliquées dans react router docs et une lecture recommandée. Voici l'exemple de la documentation:

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

En résumant le docs , vous remarquerez à quel point il devient simple et déclaratif d'ajouter le Redirect aux grandes tailles d'écran en utilisant le routage dynamique. L'utilisation de routage statique dans de tels cas serait assez lourde et nécessiterait que nous mettions toutes les routes en un seul endroit. Le fait d'avoir un routage dynamique simplifie ce problème puisque maintenant la logique devient composable (comme les composants).

Routage statique

Il existe certains problèmes qui ne sont pas résolus facilement avec le routage dynamique. Un avantage de routage statique est qu'il permet l'inspection et la correspondance des itinéraires avant le rendu. Il s'avère donc particulièrement utile côté serveur. L'équipe de routeurs React travaille également sur une solution appelée react-router-config , citant à partir de laquelle:

Avec l'introduction de React Router v4, il n'y a plus de configuration d'itinéraire centralisée. Dans certains cas d'utilisation, il est utile de connaître tous les itinéraires potentiels de l'application, tels que:

  1. Chargement des données sur le serveur ou dans le cycle de vie avant de rendre l'écran suivant
  2. Liaison aux itinéraires par nom
  3. Analyse statique

J'espère que cela fournit un bon résumé du routage dynamique et du routage statique et de leurs cas d'utilisation :)

12
Divyanshu Maithani

Selon les documents React-Router:

Lorsque nous disons routage dynamique , nous entendons le routage qui a lieu pendant le rendu de votre application, et non dans une configuration ou une convention en dehors d'une application en cours d'exécution. Cela signifie que presque tout est un composant dans React Router.

Il est clair pour l'explication que, tous vos itinéraires ne sont pas initialisés au début de votre demande,

Dans React-router v3 ou inférieur, il utilisait les routes statiques et tous Les routes seraient initialisées au niveau supérieur, et l'imbrication était auparavant réalisée comme

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

Avec cette configuration d'API, react-router réimplémentait des parties de React (cycles de vie, et plus), et cela ne correspondait tout simplement pas à la logique de composition qui React recommande l'utilisation.

Avec Dynamic Routes, les avantages suivants sont à prévoir

Itinéraires imbriqués

Les itinéraires imbriqués avec routage dynamique ressemblent davantage à

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

Dans l'exemple ci-dessus, uniquement lorsque/todos correspond au chemin-chemin, le composant Todo est monté, puis seulement le chemin Route /todos/:id est défini.

Itinéraires réactifs

Les documents React-router ont un bon cas d'utilisation pour cela.

Considérez qu'un utilisateur accède à /invoices. Votre application est adaptative à différentes tailles d'écran, elles ont une fenêtre étroite et vous ne leur montrez donc que la liste des factures et un lien vers la facture dashboard. Ils peuvent naviguer plus loin à partir de là.

Cependant sur un grand écran, la navigation est à gauche et le tableau de bord ou les factures spécifiques s'affichent à droite.

et donc /invoices n'est pas une route valide pour un grand écran et nous voudrions rediriger vers /invoices/dashboard. Cela peut arriver ainsi, l'utilisateur fait pivoter son téléphone d'un portait to a landscape mode. Cela peut facilement être fait en utilisant le routage dynamique

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

Utilisation des routes dynamiques avec React Router’s, pensez à components, pas aux routes statiques.

Fractionnement de code

Une grande caractéristique du Web est que nous n'avons pas à obliger nos visiteurs à télécharger l'intégralité de l'application avant de pouvoir l'utiliser. Vous pouvez considérer le fractionnement de code comme un téléchargement incrémentiel de l'application. This is made possible with Dynamic Routing.

L'avantage qu'il apporte est que tout votre code n'a pas besoin d'être téléchargé en même temps et que, par conséquent, le rendu initial est plus rapide.

Ici est un bon article qui vous aide à configurer le codeSplitting pour votre application

Écriture de routes authentifiées composables

Avec le routage dynamique, il est également plus facile d'écrire PrivateRoutes (un HOC qui fait l'authentification) qui permet d'authentifier les utilisateurs et de leur donner accès à des routes spécifiques et de rediriger autrement. Cet appel m'a fait de façon très générique

Un itinéraire privé typique ressemblerait à

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

et peut être utilisé comme

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