Как я могу различать параметры запроса в путях маршрутизации в React-router

Вот мой код маршрута:

<Switch>{createRoutes()}</Switch>

const createRoutes = () =>
  Routes.map(({ component: Component, urls }) =>
    urls.map((url) => (
      <Route
        path = {url}
        exact
        render = {() => <Component/>}
      />
    )),
  );
  
const Routes = [
  {
    urls: ['/'],
    component: Home,
  },
  {
    urls: ['/test'],
    component: Test,
  },
];

И я хочу, чтобы когда URL-адрес «/test?x=1» соответствовал компоненту Контрольная работа, а когда URL-адрес «/test» соответствовал компоненту Дом. Как я могу это сделать?

reactjs react-router

21.03.2022 12:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

react-router-dom рассматривает только часть URL-адреса пути для сопоставления маршрутов, нет способа использовать queryString для сопоставления маршрутов.

Что вы можете сделать, так это создать компонент, который проверяет свойство location текущего search объекта и условно визуализирует соответствующий компонент.

Пример:

const TestWrapper = (props) => {
  const { search } = useLocation();

  switch (search) {
    case "":
      return <Home {...props} />;

    default:
      return <Test {...props} />;
  }
};

...

const routes = [
  {
    paths: ["/"],
    component: Home
  },
  {
    paths: ["/test"],
    component: TestWrapper
  }
];

Кроме того, в react-router-dom@5 компонент Route может принимать массив путей, поэтому вам не нужно явно сопоставлять маршрут для каждого пути в массиве paths.

const createRoutes = () =>
  routes.map(({ component: Component, paths }) => (
    <Route key = {paths.join()} path = {paths} exact component = {Component} />
  ));

Edit how-can-i-differentiate-query-parameters-in-routing-paths-in-react-router