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

Question

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

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

Есть ли способ объединить его, чтобы он был похож на:

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

Answer 1

Для 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, я написал!

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

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

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

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

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

Answer 2

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

Answer 3

пример кода для нескольких имен путей для одного и того же компонента:

  {["/affiliate/demo", "/affiliate/listcampaign", "/affiliate/createcampaign", "/affiliate/createcampaignshare/:id", "/affiliate/manageoffers", "/affiliate/accountsetting", "/affiliate/subaffiliates", "/affiliate/createsubaffiliate", "/affiliate/viewsubaffiliate"].map((path, index) => {
          return (<Route exact key={index} path={path} component={Affilaiteslistcampaign} />)
        })}

Answer 4

Это должно работать для вас.

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

https://reacttraining.com/react-router/web/api/Route/path-string-string