Как заменить компонент каталога детальным компонентом элемента, используя реагирующий роутер dom?

Question

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

const Main = () => {
  return (
    <Switch>
      <Route path="/" exact component={Landing} />
      <Route
        path="/catalog/:category/:type?/:typeOption?"
        component={Catalog}
      />
      <Route path="???" component={DetailedView} />
      />
    </Switch>
  );
};

Компонент Каталог - это, по сути, список товаров, доступных в магазине.Когда пользователь нажимает на один из элементов, я хочу заменить компонент Каталог на компонент, который отображает элемент со всеми его деталями.Когда я нахожусь на подробной странице, URL должен быть категорией, в которой я находился, с добавлением названия элемента.

Например - я могу быть на / catalog / mens / shirts / brown , и когда я нажимаю на элемент, меня отправляют на - / catalog / mens / shirts/ коричневый / nameOfShirt .Я могу получить URL-адрес для отправки пользователя через проп, но что я могу указать для пути моего компонента DetailView?

Answer 1

Похоже, что вы ищете Nested Routing

Внутри основного компонента коммутатор будет обеспечивать только представление посадки и каталога.

<Switch>
  <Route path="/" exact component={Landing} />
  <Route
    path="/catalog/:category/:type?/:typeOption?"
    component={Catalog}
  />
</Switch>

Сейчасдалее в представлении каталога вы можете вложить детали в что-то вроде:

function Catalog({ match }) {
  return (
    <div>
      <Route
        path={match.path + '/:nameOfProduct'}
        component={DetailedView}
      />
      <Route
        exact
        path={match.path}
        render={() => <h3>Render the list of items here</h3>}
      />
    </div>
  )
}

Таким образом, URL-адрес изменяется на добавленный к тому, что было ранее.

Чтобы обработать необязательные параметры, вам придется как-то дифференцировать идентификатор для type и product.Например,Если у меня есть ограничение на то, что все идентификаторы продуктов начинаются с pr, это будет выглядеть следующим образом:

<Switch>
  <Route path={`${match.path}/:id(pr.*)`} render={() => <p>Product</p>} />
  <Route path={match.path} render={() => <p>Still Catalogue</p>} />
</Switch>

Если вы не можете дифференцировать их с помощью шаблона регулярных выражений, то вам придется добавить параметр маршрутизации вURL, делающий это:

/catalog/mens/shirts/product/nameOfShirt /catalog/mens/shirts/type/product/nameOfShirt

Таким образом, вы можете добавить Route над значением для catalog в операторе Switch