Routage

Jutro enveloppe react-router-dom et fournit un mécanisme de routage basé sur des opinions géré via le AppFloorPlan Cela vous permet de configurer vos routes et la navigation latérale/supérieure sans avoir à ajouter beaucoup de code à votre application.

La fonctionnalité par défaut est que le plan englobe toutes les pages de votre application. Vous pouvez inclure des boutons de navigation soit dans le panneau supérieur, soit dans le panneau latéral, soit dans les deux.

@jutro/router fournit également différents composants que vous pouvez utiliser comme liens sur vos pages. Ces composants sont notamment les suivants :

Lien
AsyncLink
Barres de navigation

Vous pouvez importer ces composants comme suit :

import { Link, Breadcrumbs } from '@jutro/router';

Si vous souhaitez aller au-delà des fonctionnalités standard du routage Jutro, vous pouvez utiliser directement react-router-dom des crochets et d'autres fonctionnalités.

Configuration des routes

Vous pouvez contrôler les routes à l'aide de la propriété routes ou sideRoutes de AppFloorPlan. Pour ajouter de nouvelles pages à votre application, ajoutez-les à l'une de ces propriétés.

Définissez sideRoutes pour afficher le volet de navigation sur le côté gauche. Définissez routes pour afficher le volet de navigation en haut dans le sous-titre. Si vous voulez afficher le volet de navigation supérieur et aussi celui de gauche, vous pouvez définir sideRoutes et routes.

Ces routes ont la forme suivante :

export type Route = {
  // react-router-dom Route and Redirect props
  /**
   * URL path of the route
   */
  path?: string,
  /**
   * If true, will only match if the path matches the location.pathname exactly
   */
  exact?: boolean,
  /**
   * If true, a path that has a trailing slash will only match a location.pathname with a trailing slash
   */
  strict?: boolean,
  /**
   * Match is case sensitive
   */
  sensitive?: boolean,
  /**
   * Path to which redirect when entering the current page
   */
  redirect?: string,
  /**
   * When true, redirecting will push a new entry onto the history instead of replacing the current one
   */
  push?: boolean,
  /**
   * The location to redirect to
   */
  to?: IntlToShape,
  /**
   * A pathname to redirect from
   */
  from?: string,
  // end of react-router-dom
  /**
   * Identifier for the route
   */
  id?: string,
  /**
   * Component to be rendered as the destination page for this route
   */
  component?: ReactComponent,
  /**
   * Properties for the component to be rendered
   */
  componentProps?: Record<string, unknown>,
  /**
   * Title to be displayed for the route
   */
  title?: IntlMessageShape,
  /**
   * Defines whether the route should be shown in the navigation
   */
  showOnNavBar?: boolean,
  /**
   * Nav link properties
   */
  navLink?: NavLinkPropTypes,
  /**
   * Array of sub-routes
   */
  routes?: Route[],
  /**
   * An external path
   */
  href?: string,
};

For example:

{
  "sideRoutes": [
    {
      "path": "/",
      "exact": true,
      "showOnNavBar": false,
      "redirect": "/welcome"
    },
    {
      "title": {
        "id": "jutro-app.Pages.Welcome.title",
        "defaultMessage": "Welcome"
      },
      "path": "/welcome",
      "exact": true,
      "component": "Welcome"
    },
    {
      "title": {
        "id": "jutro-app.Pages.CodelessForm.FormsMenu",
        "defaultMessage": "Forms"
      },
      "id": "forms",
      "path": "/forms",
      "routes": [
        {
          "title": {
            "id": "jutro-app.Pages.CodelessForm.title",
            "defaultMessage": "Codeless Form"
          },
          "path": "/forms/codeless",
          "exact": true,
          "component": "CodelessForm"
        }
      ]
    },
    {
      "title": {
        "id": "jutro-app.Pages.Settings.title",
        "defaultMessage": "Settings Page"
      },
      "path": "/settings",
      "exact": true,
      "component": "SettingsPage"
    }
  ]
}

Par défaut, toutes les pages défilent vers le haut après le rendu. En définissant excludeScrollToTopRoutes, vous pouvez exclure certaines pages du défilement automatique. Vous indiquez les chemins d'accès aux pages à exclure, comme indiqué dans les exemples suivants :

 "floorplan.default": {
    // . . .
    "excludeScrollToTopRoutes": [
      {
        "path": "/welcome"
      },
      {
        "path": "/forms/codeless"
      }
    ],
  }

 "floorplan.default": {
    // . . .
    "excludeScrollToTopRoutes": "/forms/codeless",
  }

Liens

Lors de la création de liens dans l'application, utilisez l'un des composants de lien disponibles et spécifiez un lien absolu, en procédant comme suit :

<Link to="/vendors/mechanic">Select a mechanic</Link>

Les composants de lien disponibles sont les suivants :

Liens externes

Pour spécifier un lien externe, utilisez href :

<Link href="https://google.com/index.php">
  A useful site for finding things on the internet
</Link>

Liens relatifs

Si vous souhaitez utiliser des chemins relatifs, utilisez le crochet useHistory de react-router-dom. Supposons par exemple que vous avez les URL suivantes :

claims
claims/:claimId
claims/:claimId/contacts
claims/:claimId/contacts/:contactId/details
different-location-of-contacts/contacts
different-location-of-contacts/contacts/:contactId/details

Vous souhaitez peut-être créer des liens vers des coordonnées provenant de différents emplacements, par exemple si vous réutilisez un composant sur plusieurs pages. Un lien relatif peut vous aider à résoudre ce problème.

const { location } = useHistory();

// . . .

<Link to={`${location.pathname}/${contactId}/details`}>
  Show contact ${contactId}
</Link>;

Paramètres du chemin

Vous pouvez définir le « chemin » d'une route pour inclure des paramètres :

{
  "title": "Claim details",
  "path": "/claim/:claimId/details"
}

Ensuite, dans JSX, vous pouvez utiliser le paramètre comme suit :

import { useParams } from 'react-router-dom';

// . . .

const params = useParams();
const claimId = params?.claimId;

Par exemple, vous pouvez renvoyer des utilisateurs à la page à l'aide d'un Link, comme suit :

<Link to={`/claim/${selectedClaimId}/details`}>Go to claim details</Link>

Vous pouvez aussi simplement inclure la route s'étant elle-même paramétrée dans la barre latérale. Lorsque l'utilisateur clique sur le lien, il accèdera à /claim/:claimId/details, et params?.claimId sera égal à :claimId. Vous pouvez utiliser ceci pour créer un nouveau sinistre, car l'URL n'inclut pas l'ID d'un sinistre existant.

if (claimId === ':claimId') {
  return <NewClaimForm />;
}

Si vous souhaitez exclure la route de la navigation, vous pouvez ajouter "showOnNavBar": false à la configuration de la route :

{
  "title": "Claim details",
  "path": "/claim/:claimId/details",
  "showOnNavBar": false
}

Fourniture de routes publiques et privées

Pour en savoir plus, consultez la section Routes sécurisées.

Nom de base

Si vous déployez votre application à la racine d'un domaine, votre routage va automatiquement supposer que tout chemin absolu commence au niveau de votre domaine. Par exemple /users/admin pointe vers https://company.com/users/admin.

Si vous souhaitez déployer votre application vers un sous-itinéraire dans le domaine, spécifiez les variables d'environnement JUTRO_ROUTER_BASENAME et PUBLIC_URL.

Par exemple, si vous spécifiez :

JUTRO_ROUTER_BASENAME=/claims-manager
PUBLIC_URL=/claims-manager

Le lien ci-dessus pointe vers https://company.com/claims-manager/users/admin.

Assurez-vous que l'élément suivant est présent dans l'index.html de votre application pour qu'il fonctionne correctement : <base href="%PUBLIC_URL%/" />.

Demander avant de quitter

Si vous ne voulez pas que l'utilisateur quitte accidentellement la navigation en cours d'action (par exemple lorsqu'il remplit un formulaire), utilisez Prompt de react-router-dom. Cela n'empêche pas l'utilisateur de quitter la navigation, mais il en est averti par une boîte de dialogue du navigateur.

import { Card } from '@jutro/components';
import React, { useState } from 'react';
import { Prompt } from 'react-router-dom';
import { Link } from '@jutro/router/';

export default function StayHere() {
  const [notDone, setNotDone] = useState(true);
  const userName = 'Darius';
  return (
    <Card>
      <Prompt
        when={notDone}
        message={`I'm sorry ${userName}, but you're not done filling the form`}
      />
      <h1>Important form</h1>
      <Link onClick={() => setNotDone(false)}>
        {notDone ? 'Click me before you can leave' : 'Okay, you may go'}
      </Link>
    </Card>
  );
}

Titre de la page

Vous pouvez utiliser PageTitle pour contrôler le titre de la page et d'autres paramètres.

Par exemple :

import { PageTitle } from '@jutro/router';

// ...
return (
  <MyPage>
    <PageTitle title="Open claims" />
    <MetadataForm {...props} />
    {/* etc. */}
  </MyPage>
);

PageTitle : utilise la propriété title pour modifier le titre de la page. Met à jour l'élément <title> dans le <head> du fichier HTML. L'élément titre contient le titre de la page et le nom de l'application.

Routes sécurisées

Lorsque vous utilisez un AppFloorPlan, et que l'authentification Jutro est activée, toutes les routes du plan sont sécurisées. Cela signifie que si l'utilisateur n'est pas connecté, il sera redirigé vers la page de connexion.

Si vous souhaitez que seuls certaines routes soient sécurisées et que d'autres soient ouvertes, vous devez implémenter votre propre routeur d'application. Pour cela, vous pouvez utiliser React Router et le composant SecureRoute.

Note:

La dépendance @jutro/auth est désormais facultative pour les packages @jutro/router et @jutro/components . Cependant, SecureRoot component nécessite que @jutro/auth soit ajouté aux dépendances de votre application pour être utilisé.

Lors de l'encapsulage de votre application avec AuthProvider, vous devez lui transmettre les propriétés onLocationChange et location. Vous pouvez ensuite utiliser SecureRoute pour exiger l'authentification pour les routes sélectionnées.

import { useCallback } from 'react';
import { SecureRoute } from '@jutro/router';
import { AuthProvider } from '@jutro/auth';
import { Route, useLocation } from 'react-router-dom';

const location = useLocation();

const onLocationChange = useCallback(
  (newPath) => history.replace(newPath),
  [history]
);

// ...

return (
  <AuthProvider
    onLocationChange={onLocationChange}
    location={location}>
    <Route
      path="/teams"
      element={<Teams />}>
      <Route
        index
        element={<TeamsIndex />}
      />
      <SecureRoute
        path=":teamId"
        render={<Team />}
      />
    </Route>
  </AuthProvider>
);

Dépendance de routeur facultative

La dépendance @jutro/router et ses dépendances homologues telles que history et react-router-dom sont désormais facultatives pour les packages de composants. Pour certains composants, il est toutefois nécessaire de l'ajouter aux dépendances de votre application afin de pouvoir l'utiliser. La liste suivante de composants nécessite l'ajout de @jutro/router :

Composant	Importer depuis
DropdownMenuAvatarContent	`@jutro/components`
InlineNotification	`@jutro/components`
LanguageSelector	`@jutro/components`
PopoverContainer	`@jutro/components`
ToastProvider	`@jutro/components`

Configuration des routes​

Liens​

Liens externes​

Liens relatifs​

Paramètres du chemin​

Fourniture de routes publiques et privées​

Nom de base​

Demander avant de quitter​

Titre de la page​

Routes sécurisées​

Dépendance de routeur facultative​