Routage Dynamique

à Partir du réagir routeur docs:

quand nous disons routage dynamique, nous voulons dire routage qui prend place en tant que votre app rendering, pas dans une configuration ou une convention en dehors d'une application en cours d'exécution.

pensez aux routes en tant que composants

les versions précédentes de react-router (pré v4) utilisé pour avoir des routes statiques. Cela a conduit vers un routage centralisé en les applications de la forme:

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

Toutefois, ce n'est pas exactement le Réagir de façon de faire des choses. React se concentre sur la composition en utilisant une logique basée sur les composants. Ainsi, au lieu d'imaginer nos Routes comme un système statique, nous pouvons les imaginer comme des composants, ce qui est ce que react-router v4 apporte et la philosophie première derrière elle.

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 à nous construire les différents composants. Un avantage de faire cela est que nous pouvons découpler la logique de routage aux composants qui en ont besoin.

routes de nidification

About component peut gérer toutes les routes et rendre conditionnellement des parties de L'interface basée sur l'url (dire /about/job ou /about/life etc).

une Autre chose à noter est que un Route composant soit de rendre le composant pour un itinéraire correspondant ou null. Exemple, le code suivant Route rend le About composant d'un itinéraire /about et null (ou rien) sinon.

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

ceci est également similaire à la façon dont nous sommes utilisés pour rendre conditionnellement les composants dans React:

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

maintenant si nous avons besoin de rendre d'autres composants à l'intérieur du About composant pour des trajets /about/job ou /about/life on peut le faire comme ceci:

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

Dynamique des importations et le code de fractionnement

personnellement, J'ai aussi trouvé que cette approche fonctionne mieux pour moi dans le cas où j'utilise des importations dynamiques avec fractionnement de code, puisque je peux ajouter des routes 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} />
    )
}

Responsive itinéraires

un autre grand cas d'utilisation pour le routage dynamique est la création de routes responsive qui est expliqué magnifiquement dans le réagir routeur docs et une lecture recommandée. Voici l'exemple de la doc:

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

résumant le docs, vous remarquerez combien simple et déclarative, il devient pour ajouter le Redirect aux grands écrans en utilisant le routage dynamique. Dans de tels cas, l'utilisation d'itinéraires statiques serait très lourde et nécessiterait que nous mettions tous les itinéraires 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 y a des problèmes qui ne sont pas résolus facilement avec le routage dynamique. Un avantage de l' routage statique c'est que il permet l'inspection et la correspondance des routes avant le rendu. Il s'avère donc particulièrement utile du côté serveur. La réagir routeur équipe travaille également sur une solution appelée réagissent-routeur-config en citant le qui:

avec L'introduction du routeur React v4, il n'y a plus de configuration centralisée de la route. Il y a quelques cas d'utilisation où il est précieux pour 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. lien vers les routes par nom
3. analyse Statique

Espère que cela donne un bon résumé de la Dynamique de Routage Statique et le Routage et les cas d'utilisation pour eux :)

selon les docs du routeur React:

quand on dit routage dynamique, nous voulons dire routage qui a lieu comme votre app rendering, pas dans une configuration ou une convention en dehors d'un application en cours d'exécution. Cela signifie que presque tout est un composant de Réagir Routeur.

il est clair pour l'explication que, toutes vos Routes ne sont pas initialisées au début de votre application,

Routeur React v3 ou ci-dessous, il a utilisé Routes statiques et toutes les Routes seraient initialisées au niveau supérieur, et la nidification était 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 API, react-router réimplémentait des parties de React (lifecycles, et plus), et cela ne correspondait tout simplement pas à la logique de composition que React recommande d'utiliser.

avec les Routes dynamiques les avantages suivants, viennent à être prévus

emboîtés Itinéraires

les Routes imbriquées avec routage dynamique sont plus comme

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, seulement quand /todos correspond au chemin de route, le composant Todo est monté et seulement alors le chemin de Route /todos/:id est défini.

Responsive itinéraires

Les Docs React-router ont un bon dossier d'utilisation pour cela.

si un utilisateur accède à /invoices. Votre application s'adapte à différentes tailles d'écran, ils ont une étroite fenêtre d'affichage, et donc vous montrer la liste des factures et un lien vers la facture dashboard. Ils peuvent naviguer plus profondément à partir de là.

cependant sur un grand écran, la navigation est à gauche et le tableau de bord ou les factures spécifiques apparaissent à droite.

et donc /invoices n'est pas une Route valide pour un grand écran et nous voudrions rediriger vers /invoices/dashboard. Cela peut donc se produire, l'utilisateur fait tourner son téléphone à partir 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>
)

en utilisant des Routes dynamiques avec des routeurs React, pensez à components, pas de routes statiques.

Fractionnement Du Code

une grande caractéristique du web est que nous n'avons pas à obliger nos visiteurs à télécharger l'application entière avant qu'ils puissent l'utiliser. Vous pouvez penser à la division de code comme téléchargement progressif de l'application. This is made possible with Dynamic Routing.

les avantages qu'il apporte est que tout votre code n'a pas besoin d'être téléchargé à une fois et donc il rend le rendu initial plus rapide.

Ici est un bon article qui vous aide à l'installation codeSplitting pour votre application

Rédaction Composable Authentifié Itinéraires

avec le routage dynamique il est aussi plus facile d'écrire des PrivateRoutes (un HOC qui fait authentification) qui permettent d'authentifier les utilisateurs et de leur donner accès à des Routes spécifiques et de rediriger autrement. Cet appel tout me fait très génériquement

une Route privée 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} />