Routing

Jutro umschließt react-router-dom und bietet einen aussagekräftigen Routing-Mechanismus, der von AppFloorPlan verwaltet wird. Dies ermöglicht es Ihnen, Ihre Routen und die Top/Side-Navigation zu konfigurieren, ohne viel Code zu Ihrer App hinzufügen zu müssen.

In der Standardeinstellung umfasst der Floorplan alle Seiten Ihrer App. Sie können Navigationsschaltflächen entweder in der oberen Navigationsleiste oder in der seitlichen Navigationsleiste oder in beiden einfügen.

@jutro/router bietet auch eine Vielzahl von Komponenten, die Sie als Verknüpfungen auf Ihren Seiten verwenden können. Zu diesen Komponenten gehören:

• Link
• AsyncLink
• Breadcrumbs

Sie können diese Komponenten wie folgt importieren:

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

Wenn Sie über die Standardfunktionen des Jutro-Routings hinausgehen wollen, können Sie direkt react-router-dom Hooks und andere Funktionen verwenden.

Konfigurieren von Routen

Sie können Routen mit der Eigenschaft routes oder sideRoutes von AppFloorPlan steuern. Um Ihrer App neue Seiten hinzuzufügen, fügen Sie sie einer dieser Eigenschaften hinzu.

Die Einstellung sideRoutes sorgt dafür, dass die Navigation auf der linken Seite angezeigt wird. Die Einstellung routes sorgt dafür, dass die Navigation oben in der Unterkopfzeile angezeigt wird. Wenn Sie die Navigation sowohl oben als auch links wünschen, können Sie sowohl sideRoutes als auch routes festlegen.

Diese Routen haben die folgende Form:

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"
    }
  ]
}

Standardmäßig werden alle Seiten nach dem Rendern nach oben gescrollt. Durch die Einstellung excludeScrollToTopRoutes können Sie einige Seiten vom automatischen Scrollen ausschließen. Sie geben die Pfade zu den Seiten an, die Sie ausschließen möchten, wie in den folgenden Beispielen dargestellt:

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

oder

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

Verknüpfungen

Wenn Sie innerhalb der App Verknüpfungen erstellen, verwenden Sie eine der verfügbaren Verknüpfungskomponenten und geben Sie eine absolute Verknüpfung an, etwa so:

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

Die verfügbaren Verknüpfungskomponenten sind:

• Link
• AsyncLink

Externe Verknüpfungen

Eine externe Verknüpfung geben Sie mit href an:

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

Relative Verknüpfungen

Wenn Sie mit relativen Pfaden arbeiten möchten, verwenden Sie den useHistory-Hook aus react-router-dom. Angenommen, Sie haben die folgenden URLs:

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

Möglicherweise möchten Sie von verschiedenen Stellen aus auf Kontaktdaten verweisen, z. B. wenn Sie eine Komponente auf mehreren Seiten wiederverwenden. Eine relative Verknüpfung kann Ihnen helfen, dieses Problem zu lösen.

const { location } = useHistory();

// . . .

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

Pfadparameter

Sie können den 'Pfad' einer Route mit Parametern definieren:

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

Dann können Sie in JSX den Parameter wie folgt verwenden:

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

// . . .

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

Sie könnten Benutzer zum Beispiel mit einem Link auf die Seite schicken, etwa so:

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

Sie können die parametrisierte Route auch einfach selbst in die Seitennavigation aufnehmen. Wenn der Benutzer auf den Link klickt, wird er zu /claim/:claimId/details weitergeleitet und params?.claimId ist gleich :claimId. Damit können Sie einen neuen Schadenfall erstellen, da die URL nicht die ID eines vorhandenen Schadenfalls enthält.

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

Wenn Sie die Route von der Navigation ausschließen möchten, können Sie "showOnNavBar": false der Routenkonfiguration hinzufügen:

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

Bereitstellung öffentlicher und privater Routen

Weitere Informationen finden Sie im Abschnitt Sichere Routen.

Basisname

Wenn Sie Ihre App im Stammverzeichnis einer Domäne bereitstellen, geht Ihr Routing automatisch davon aus, dass jeder absolute Pfad in Ihrer Domäne beginnt. Zum Beispiel verweist /users/admin auf https://company.com/users/admin.

Wenn Sie Ihre App auf einer Unterroute in der Domäne bereitstellen möchten, geben Sie die Umgebungsvariablen JUTRO_ROUTER_BASENAME und PUBLIC_URL an.

Beispiel für eine Angabe:

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

Die Verknüpfung oben verweist auf https://company.com/claims-manager/users/admin.

Stellen Sie sicher, dass das folgende Element in der index.html Ihrer App vorhanden ist, damit sie richtig funktioniert: <base href="%PUBLIC_URL%/" />.

Eingabeaufforderung vor dem Verlassen der Seite

Wenn Sie nicht möchten, dass der Benutzer mitten in einer Aktion (z. B. beim Ausfüllen eines Formulars) versehentlich eine Seite verlässt, verwenden Sie Prompt von react-router-dom. Dies hält den Benutzer nicht davon ab, die Seite zu verlassen, aber es warnt ihn in einem Browser-Dialogfeld.

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

Seitentitel

Sie können PageTitle verwenden, um den Titel der Seite und andere Einstellungen zu steuern.

Beispiel:

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

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

PageTitle - Verwenden Sie die title-Eigenschaft, um den Seitentitel zu ändern. Aktualisiert das <title>-Element in <head> der HTML-Datei. Das title-Element enthält den Titel der Seite und den Namen der App.

Sichere Routen

Wenn Sie einen AppFloorPlan verwenden und die Jutro-Authentifizierung aktiviert ist, sind alle Routen innerhalb des Grundrisses sicher. Das heißt, dass der Benutzer auf die Anmeldeseite weitergeleitet wird, wenn er nicht angemeldet ist.

Wenn Sie möchten, dass nur einige Routen sicher und andere Routen offen sind, müssen Sie Ihren eigenen App-Router implementieren. Sie können dies mit React Router und der SecureRoute-Komponente.

Note:

Die @jutro/auth -Abhängigkeit ist nun optional für @jutro/router und @jutro/components-Pakete. Allerdings erfordert die SecureRoot-Komponente, dass @jutro/auth zu Ihren App-Abhängigkeiten hinzugefügt wird, um verwendet werden zu können.

Wenn Sie Ihre App mit AuthProvider umschließen, müssen Sie die Eigenschaften onLocationChange und location übergeben. Anschließend können Sie SecureRoute verwenden, um für ausgewählte Routen eine Authentifizierung anzufordern.

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

Optionale Router-Abhängigkeit

Die @jutro/router-Abhängigkeit und ihre Peer-Abhängigkeiten wie history und react-router-dom sind jetzt für Komponentenpakete optional. Bestimmte Komponenten erfordern jedoch, dass sie zu den Abhängigkeiten Ihrer App hinzugefügt werden, um verwendet werden zu können. Die folgende Liste zeigt die Komponenten, bei denen @jutro/router hinzugefügt werden muss:

Komponente	Importieren aus
DropdownMenuAvatarContent	@jutro/components
InlineNotification	@jutro/components
LanguageSelector	@jutro/components
PopoverContainer	@jutro/components
ToastProvider	@jutro/components