Кілька імен шляхів для одного компонента в React Router

113

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

<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

Станом на реактор-маршрутизатор 4.4.0, тепер ви можете вказати масив шляхів способом, дуже подібним до вашої пропозиції. Дивіться мою відповідь тут .

— Бен Сміт

137

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

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

Кожен шлях у масиві - це рядок регулярного виразу.

Документацію такого підходу можна знайти тут .

— Бен Сміт
джерело

5

Я вважаю, що це найкраща відповідь. Відповідь @Cameron ні в якому разі не підтримує повну функцію regexp (принаймні, я не зміг цього зробити).

— Крістофер Регнер

2

Як встановити exactатрибут для одного шляху?

— JulianSoto

1

@JulianSoto Створіть маршрут до компонента одним єдиним шляхом разом з точним шляхом. Потім можна створити інший маршрут до того ж компонента з масивом контурів без точного атрибута.

— Бен Сміт

Я не можу yarn upgradeвід 4,3 до 4,4. Чи офіційно випущено?

— ndtreviv

@ndtreviv Переглядаючи журнал змін реакцій маршрутизатора, я бачу, що ця функція була розгорнута в версії 4.4.0 Beta 4. Я рекомендую оновити до останньої версії, яка на момент написання цього сценарію становить версію 5.5.0. Ви можете зробити це під керуванням "модернізація пряжі реактивний маршрутизатор - найновіший"

— Бен Сміт

115

Принаймні, з react-router v4 pathможе бути рядок регулярного вираження, тож ви можете зробити щось подібне:

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

Як ви бачите, це дещо багатослівний, тому, якщо ваш component/ routeпростий, як це, мабуть, не варто.

І звичайно, якщо це дійсно трапляється часто, ви завжди можете створити обгортковий компонент, який приймає pathsпараметр масиву , який робить регулярний вираз або .mapлогіку повторно.

— Камерон
джерело

5

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

— Таулер

4

Повинно бути великим, але на даний момент тип регулярний вираз не поширюється на перевірки проп-типів: Warning: Failed prop type: Invalid prop path` типу , 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.

Ви можете використовувати як, mapяк і будь-який інший компонент JSX:

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

EDIT

Ви також можете використовувати регулярний вираз для шляху в реакторі-маршрутизаторі v4 до тих пір, поки він підтримується способом " шлях до" . Дивіться відповідь @ Кемерона для отримання додаткової інформації.

— Крістофер Чиче
джерело

3

Не забувайте про keyопору.

— Нейромедіатор

9

зауважте, це спричинить (небажані ...?) перерахунки при переході з контурів (наприклад, / home => / користувачів у цьому прикладі)

— Hertzel Guinness

Справді! Бажаність бажано залежить від вашого використання та компонентів. Якщо ви не хочете здійснювати повторне повторне використання, використання regexp, зазначеного в моїй редакції, може працювати краще.

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

5

Станом на reakct-route-dom v5.1.2 ви можете пройти кілька шляхів, як показано нижче

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

І очевидно вам потрібно імпортувати файл Home jsx зверху.

— Абхішек
джерело

4

Інший варіант: використовувати префікс маршруту. /pagesнаприклад. Ти отримаєш

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

А потім детально вирішити це всередині Homeкомпонента.

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

— артиртр
джерело

0

Згідно з документами React Router, що вказує, що "path" типу типу є рядком.

Якщо ви маєте намір змінити лише маршрут, ви можете використовувати один і той же компонент для різних маршрутів, з цим жодних проблем

— Віжайкриш93
джерело

1

Ця відповідь більше не є правильною, оскільки шлях тепер приймає масив рядків. Дивіться цю відповідь .

— Бен Сміт

-1

Щодо реакції-маршрутизатора v4.4, ви можете просто зробити щось подібне нижче.

зберігати шлях у змінній та переходити внизу та використовувати "|" Оператор.

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

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

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

— Нісхіт
джерело