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

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

<Router>
    <Home path="/" />
    <Home path="/home" />
</Router>

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

<Router>
    <Home path=["/home", "/"] />
</Router>

reactjs javascript url-routing reach-router
person Ali Seyfollahi    schedule 05.10.2019    source источник
comment
Дубликат: stackoverflow.com/questions/40541994/   -  person Vincent    schedule 05.10.2019
comment
Это для React Router, это для Reach Router @Vincent   -  person Ali Seyfollahi    schedule 05.10.2019
comment
Ты прав. Извини. Виноват.   -  person Vincent    schedule 05.10.2019

Ответы (4)


arrow_upward
2
arrow_downward

Для Reach Router: (https://reach.tech/router/example/)

С показанным точным образцом единственный способ увидеть, как это сделать (в одной строке), - это использовать подстановочный знак.

Чтобы найти способ воспроизвести это без побочных эффектов, нам нужно увидеть все навигационное меню.

  <Router>
    <Home path="/*" />
    <Chicken path="chicken">
  </Router>

...

const Home = props => {
  let urlPath = props["*"]
  // URL: "/home"
  // urlPath === "home"
  // URL/: "/"
  // urlPath ===""
}

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

Ознакомьтесь с примером использования подстановочного знака и досягаемости маршрутизатора на codeandbox, я написал!< /а>

Примечание. Это универсальное решение, но без разбора параметра это единственное однострочное решение, которое я видел.

Некоторые недостатки включают рендеринг Home вместо «404» и т. д.

// Это можно решить с помощью оператора if в вашем рендере

// Он не будет создавать предполагаемый URL-адрес для /home, и я не изучал это, поскольку это не является частью вопроса ... но если он соответствует реквизитам [*], я уверен, что вы могли бы перенаправить или что-то в этом роде.

Вы можете прочитать больше о компоненте маршрута для Reach Router. https://reach.tech/router/api/RouteComponent

person Cullen Bond    schedule 11.10.2019
comment
Первая ссылка битая. - person Mark Amery; 05.10.2020

arrow_upward
2
arrow_downward

Меня не устраивало решение с подстановочными знаками из документации и @cullen-bond, потому что мне пришлось сопоставлять множество других путей, и я придумал это решение:

<Router>
  {["/home", "/", "/other", "/a-lot-more"].map(page => <Home path={page} />)}
</Router>

Пример: https://codesandbox.io/s/reach-router-starter-v1-forked-6f44c?file=/src/index.js

person roNn23    schedule 16.09.2020

arrow_upward
-2
arrow_downward

Я думаю, вы можете сделать это, как вы хотели. Взгляните на это: https://reacttraining.com/react-router/core/api/Route/path-string-string

person Nikola Ravic    schedule 05.10.2019
comment
Я использовал Reach Router вместо React Router, подробнее =› reach.tech/router - person Ali Seyfollahi; 05.10.2019
comment
Ой, извините, я думал, что это опечатка :) - person Nikola Ravic; 06.10.2019

arrow_upward
-3
arrow_downward

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

пример кода:

импортировать sampleComponent из './sampleComponent'; // один компонент для нескольких маршрутов

 <Router>
  <Switch>
   {["/pathname_1", "/pathname_2", "/pathname_3", "/pathname_4", "/pathname_5", "/pathname_6"].map(pathname =>  (<Route exact path={pathname} component={sampleComponent} />) )}
   <Switch>
<Router>
person Hemant    schedule 10.10.2019
comment
Это для React Router, я ищу решение в Reach Router - person Ali Seyfollahi; 10.10.2019