Отслеживание ваших маршрутов

При создании одностраничного приложения маршрутизация является неотъемлемой частью опыта. При разработке приложения вам нужен хороший и понятный способ контролировать маршруты.

Изменения происходят, и изменение маршрута должно происходить в одном месте кода, а затем использоваться повсюду. Если это не сделано должным образом, внесение изменений в маршрут может повлиять на время разработки и доверие разработчиков.

Сначала вы должны найти свои маршруты

Хороший способ начать — решить, какие страницы будут иметь ваше одностраничное приложение, а затем создать константу для каждой из них. Затем решите, есть ли какие-либо действия на этих страницах, и создайте константу для каждого из них. Если вы создаете простое приложение со списком продуктов, у вас могут быть следующие маршруты/страницы:

/
/auth/login
/auth/register
/auth/forgot-password
/products
/products/create
/products/:id
/products/:id/update
/products/:id/delete

Из маршрутов выше видно, что есть две основные страницы (auth и products) и шесть уникальных действий на этих страницах (login, зарегистрироваться, забыли пароль, создать, обновить и удалить).

Определение ваших маршрутов

Теперь, когда вы знаете страницы и действия для ваших маршрутов, вы можете определить их, сначала создав константу для каждой страницы и действия:

/routes.js

const AUTH = 'auth';
const PRODUCTS = 'products':
const ROOT = '/';
const CREATE = 'create';
const DELETE = 'delete';
const FORGOT_PASSWORD = 'forgot-password';
const LOGIN = 'login';
const REGISTER = 'register';
const UPDATE = 'update';

Вторая часть вашего определения маршрута — это добавление способа соединения вышеперечисленных частей вместе. Вы можете создать этот удобный маленький метод join, чтобы соединить части вместе:

/routes.js

const join = (...parts) => `${ROOT}${parts.join('/')}`;

Этот удобный маленький метод добавит все переменные, которые вы ему передадите, и разделит их косой чертой (/).

Теперь, когда все элементы на месте, вы можете определить метод для каждого маршрута. Некоторые из этих методов будут иметь значения по умолчанию, определенные для простоты использования, которые вы увидите чуть позже в этой истории.

/routes.js

export const forgotPassword = () => join(AUTH, FORGOT_PASSWORD);
export const login = () => join(AUTH, LOGIN);
export const register = () => join(AUTH, REGISTER);
export const products = () => join(PRODUCTS);
export const productsCreate = () => join(PRODUCTS, CREATE);
export const productsDelete = (productId = ':productId') =>
  join(PRODUCTS, productId, DELETE);
export const productsRead = (productId = ':productId') =>
  join(PRODUCTS, productId);
export const productsUpdate = (productId = ':productId') =>
  join(PRODUCTS, productId, UPDATE);

Использование

Все ваши маршруты определены, теперь пришло время их использовать. В следующих примерах react-router будет использоваться в качестве основной библиотеки маршрутизации, но вы можете использовать ее с любой библиотекой маршрутизации по вашему выбору.

Во-первых, вам нужно определить маршрутизатор:

/router.jsx

import { Route, Switch } from ‘react-router’;
// import components here
import {
  forgotPassword,
  login,
  register,
  products,
  productsCreate,
  productsDelete,
  productsRead,
  productsUpdate,
} from 'routes';
export default () => (
  <Switch>
    <Route component={Forgot} exact path={forgotPassword()} />
    <Route component={Login} exact path={login()} />
    <Route component={Register} exact path={register()} />
    <Route component={Products} exact path={products()} />
    <Route component={Create} exact path={productsCreate()} />
    <Route component={Delete} exact path={productsDelete()} />
    <Route component={Product} exact path={productsRead()} />
    <Route component={Update} exact path={productsUpdate()} />
  </Switch>
);

В маршрутах для productsDelete, productsRead и productsUpdate идентификатор запрашиваемого продукта будет автоматически заменен на :productId, чтобы ваш маршрутизатор знал, что нужно передать параметр.

Теперь вы можете создавать ссылки на свои компоненты, используя те же маршруты, которые определены в вашем файле routes.js. В приведенном ниже примере создается простая страница со списком некоторых продуктов.

/products.jsx

import PropTypes from 'prop-types';
import React from 'react';
import { Link } from 'react-router-dom';
import {
  productsDelete,
  productsRead,
  productsUpdate,
} from 'routes';
const Products = ({ products }) => (
  <div>
    {products.map(product => (
      <div>
        <Link to={productsRead(product.id)}>{product.name}</Link>
        <br />
        <Link to={productsDelete(product.id)}>Delete</Link>
        <br />
        <Link to={productsUpdate(product.id)}>Update</Link>
      </div>
    ))}
  </div>
);
Products.propTypes = {
  products: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  })).isRequired,
};
export default Products;

В заключении

При таком способе определения маршрутов вы можете изменять имена маршрутов и быть уверенными, что изменение в одном местоположении будет должным образом каскадно распространяться по всему вашему приложению, и вам не нужно запускать поиск и замену, надеясь, что вы нашли все местоположения. где изменение должно произойти.