Несколько имен пути для одного и того же компонента в React Router

116

Я использую один и тот же компонент для трех разных маршрутов:

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

Есть ли способ совместить это, чтобы быть как:

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>

— Четан Гарг
источник

2

Что касается response-router 4.4.0, теперь вы можете указать массив путей так же, как ваше предложение. Смотрите мой ответ здесь .

— Бен Смит

142

Начиная с response -router v4.4.0-beta.4 и официально в v5.0.0, теперь вы можете указать массив путей, которые разрешаются к компоненту, например

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

Каждый путь в массиве представляет собой строку регулярного выражения.

Документацию по этому подходу можно найти здесь .

— Бен Смит
источник

5

Я считаю, что это лучший ответ. Ответ @Cameron в любом случае не поддерживает полную функцию регулярного выражения (по крайней мере, я не смог этого сделать).

— Кристофер

2

Как установить exactатрибут для одного пути?

— JulianSoto

1

@JulianSoto Создайте маршрут к компоненту с одним единственным путем вместе с точным путем. Затем вы можете создать другой маршрут к тому же компоненту с массивом путей без точного атрибута.

— Бен Смит

Не могу yarn upgradeс 4.3 на 4.4. Он официально выпущен?

— ndtreviv

@ndtreviv Глядя на журнал изменений реагирующего маршрутизатора, я вижу, что эта функция была развернута в v4.4.0 Beta 4. Я бы рекомендовал выполнить обновление до последней версии, которая на момент написания была v5.5.0. Вы можете сделать это, выполнив команду «yarn upgrade response-router --latest»

— Бен Смит,

115

По крайней мере, с response-router v4 это pathможет быть строка регулярного выражения, поэтому вы можете сделать что-то вроде этого:

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

Как видите, это немного многословно, поэтому, если ваш component/ routeтакой простой, вероятно, этого не стоит.

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

— Кэмерон
источник

5

Отличная идея @Cameron. Я счел полезным немного изменить его, чтобы он соответствовал только путям, начинающимся с одной из групп: /^\/(home|users|widgets)/ Теперь /widgetsбудет совпадать, но /dashboard/widgetsне совпадать.

— Towler

4

Должно быть замечательно, но на данный момент регулярное выражение типа недопустимо для проверки типов Warning: Failed prop type: Invalid prop свойств : путь` типа, regexpпредоставленного Route, ожидается string.`

— Фабио Пайва,

@ FábioPaiva, да, я до сих пор не понял, как поместить произвольное регулярное выражение в маршрут

— Atav32

1

вставьте это как строку<Route path="/(new|edit)/user/:id?" ... />

— medv

2

не работаетpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}

— Муртаза Хуссейн

43

Я не думаю, что это так, если вы используете версию React Router ниже v4.

Вы можете использовать a, mapкак и любой другой компонент JSX:

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

РЕДАКТИРОВАТЬ

Вы также можете использовать регулярное выражение для пути в response-router v4, если оно поддерживается path-to-regexp . См. Ответ @ Cameron для получения дополнительной информации.

— Кристофер Чиче
источник

3

Не забудьте keyпро опору.

— Neurotransmitter

9

обратите внимание, это приведет к (нежелательному ...?) повторному подключению при переключении с путей (например, / home => / users в этом примере)

— Hertzel Guinness

На самом деле! Желательность, вероятно, зависит от вашего варианта использования и ваших компонентов. Если вы не хотите перемонтировать, использование regexp, как указано в моем редактировании, может работать лучше.

— Кристофер Чиче

6

Начиная с react-route-dom v5.1.2, вы можете передать несколько путей, как показано ниже.

 <Route path={"/home" | "/users" | "/widgets"} component={Home} />

И, очевидно, вам нужно сначала импортировать домашний jsx файл.

— Абхишек
источник

4

Другой вариант: использовать префикс маршрута. /pagesнапример. Ты получишь

/pages/home
/pages/users
/pages/widgets

А затем детально разрешите его внутри Homeкомпонента.

<Router>
  <Route path="/pages/" component={Home} />
</Router>

— Arturtr
источник

0

Согласно документам React Router, proptype 'path' имеет тип string. Таким образом, вы не можете передать массив в качестве props в компонент Route.

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

— Виджайкриш93
источник

1

Этот ответ больше неверен, поскольку путь теперь принимает массив строк. Смотрите этот ответ .

— Бен Смит

-1

Что касается response-router v4.4, вы можете просто сделать что-то вроде этого ниже.

сохраните путь в переменной и передайте ниже и используйте '|' Оператор.

let home = "/home" ;
let users = "/users”;
let widgets = "/widgets" ;

<Route path={ {home} | {users} | {widgets} }  component={Home} />

поэтому для всего пути, который он соответствует, он будет отображать то, component={Home}что вам нужно.

— Нишит
источник