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

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

<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>

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

И затем решите его подробно внутри компонента Home.

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

Ответ 5

Согласно React Router docs proptype "path" имеет строку типа. Таким образом, вы не можете передать массив в качестве реквизита для компонента маршрута.

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

Ответ 6

помогите пожалуйста, я могу компонентный язык написать русский?

Ответ 7

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

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

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

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

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