Enrutamiento

Jutro encapsula react-router-dom y proporciona un mecanismo de enrutamiento dogmático administrado a través de AppFloorPlan. Esto le permite configurar sus rutas y navegación superior/lateral sin agregar mucho código a su aplicación.

La funcionalidad predeterminada es que el plano de planta encapsule todas las páginas de la aplicación. Puede incluir botones de navegación en la navegación superior, en la lateral de navegación o en ambas.

@jutro/router también proporciona una variedad de componentes que puede utilizar como enlaces en sus páginas. Estos componentes incluyen:

Enlace
AsyncLink
Rutas de navegación

Puede importar estos componentes de la siguiente manera:

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

Si desea ir más allá de las capacidades estándares del enrutamiento de Jutro, use directamente react-router-dom ganchos y otras funcionalidades.

Configuración de rutas

Puede controlar las rutas mediante la propiedad routes o sideRoutes de AppFloorPlan. Si necesita agregar nuevas páginas a su aplicación, agréguelas a una de estas propiedades.

La configuración sideRoutes hace que la navegación aparezca en el lado izquierdo. La configuración routes hace que la navegación aparezca en la parte superior del SubHeader. Si desea la navegación superior y la izquierda a la vez, puede configurar tanto sideRoutes como routes.

Estas rutas tienen la siguiente forma:

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

De forma predeterminada, todas las páginas se desplazan a la parte superior después de la renderización. Si establece excludeScrollToTopRoutes, puede excluir algunas páginas del desplazamiento automático. Usted proporciona las rutas de acceso a las páginas que desea excluir, como se muestra en estos ejemplos:

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

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

Enlaces

Al crear enlaces dentro de la aplicación, utilice uno de los componentes enlace disponibles y especifique un enlace absoluto, de la siguiente manera:

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

Los componentes de enlace disponibles son los siguientes:

Enlaces externos

Para especificar un enlace externo, utilice href:

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

Enlaces relativos

Si desea trabajar con rutas relativas, utilice el gancho useHistory de react-router-dom. Por ejemplo, suponiendo que tiene las siguientes URL:

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

Es posible que desee vincular a detalles de contacto de diferentes ubicaciones, por ejemplo, cuando reutiliza un componente en varias páginas. Un enlace relativo puede ayudarle a resolver ese problema.

const { location } = useHistory();

// . . .

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

Parámetros de rutas

Puede definir el recorrido de una “ruta” para incluir parámetros:

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

Luego, en JSX, puede usar el parámetro de la siguiente manera:

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

// . . .

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

Por ejemplo, puede enviar a los usuarios a la página utilizando un Link, de la siguiente manera:

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

También puede incluir la ruta parametrizada por sí misma en el navegador lateral. Cuando el usuario haga clic en el enlace, irán a /claim/:claimId/details y params?.claimId será igual a :claimId. Puede usar esto para crear un nuevo siniestro porque la URL no incluye el ID de uno existente.

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

Si desea excluir la ruta desde la navegación, puede agregar "showOnNavBar": false a la configuración de ruta:

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

Cómo proporcionar rutas públicas y privadas

Consulte la sección sobre rutas seguras para obtener más información.

Nombre base

Si implementa su aplicación en la raíz de un dominio, el enrutamiento supone automáticamente que cualquier ruta absoluta comienza en su dominio. Por ejemplo, /users/admin dirige a https://company.com/users/admin.

Si desea implementar su aplicación en una subruta en el dominio, especifique las variables de entorno JUTRO_ROUTER_BASENAME y PUBLIC_URL.

Por ejemplo, si especifica:

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

El enlace anterior dirigirá a https://company.com/claims-manager/users/admin.

Asegúrese de que el siguiente elemento esté presente en index.html de su aplicación para que funcione correctamente: <base href="%PUBLIC_URL%/" />.

Aviso antes de salir de la página

Si no desea que el usuario salga accidentalmente de una página a mitad de la acción (por ejemplo, mientras completa un formulario), use Prompt desde react-router-dom. Esto no impide que el usuario salga, pero sí le advierte mediante un cuadro de diálogo del navegador.

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

Título de la página

Puede utilizar PageTitle para controlar el título de la página y otras configuraciones.

Por ejemplo:

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

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

PageTitle: Usa la propiedad title para cambiar el título de la página. Actualiza el elemento <title> en el <head> del archivo HTML. El elemento título contiene el título de la página y el nombre de la aplicación.

Rutas seguras

Cuando utiliza un AppFloorPlan y tiene la autenticación de Jutro habilitada, todas las rutas dentro del plano de planta son seguras. Esto significa que si el usuario no ha iniciado sesión, se lo redirigirá a la página de inicio de sesión.

Si desea que solo algunas rutas sean seguras y otras estén abiertas, debe implementar su propio enrutador de aplicaciones. Esto se puede hacer con el enrutador de React y utilizando el componente SecureRoute.

Note:

La dependencia @jutro/auth ahora es opcional para los paquetes @jutro/router y @jutro/components . Sin embargo, el componente SecureRoot component requiere que se agregue @jutro/auth a las dependencias de la aplicación que se van a utilizar.

Al encapsular su aplicación con AuthProvider, debe pasarle las propiedades onLocationChange y location. Luego, puede usar SecureRoute para requerir autenticación para las rutas seleccionadas.

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

Dependencia del enrutador opcional

La dependencia @jutro/router y sus dependencias de pares como history y react-router-dom ahora son opcionales para los paquetes de componentes. Sin embargo, ciertos componentes requieren que esto se agregue a las dependencias de la aplicación para utilizarlos. La siguiente lista de componentes requiere que se agregue @jutro/router:

Componente	Importar desde
DropdownMenuAvatarContent	`@jutro/components`
InlineNotification	`@jutro/components`
LanguageSelector	`@jutro/components`
PopoverContainer	`@jutro/components`
ToastProvider	`@jutro/components`

Configuración de rutas​

Enlaces​

Enlaces externos​

Enlaces relativos​

Parámetros de rutas​

Cómo proporcionar rutas públicas y privadas​

Nombre base​

Aviso antes de salir de la página​

Título de la página​

Rutas seguras​

Dependencia del enrutador opcional​