Несколько имен пути для одного и того же компонента в 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>
javascript reactjs path react-router url-routing Четан Гарг
источник
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}что вам нужно.

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