'Multiple path names for a same component in Reach Router

I am using the same component for three different routes:

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

Is there anyway to combine it, to be like:

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

Solution 1:^[1]

I wasn't happy with the wildcard solution from the documentation and @cullen-bond because I had to map many other paths and came up with this solution:

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

Example: https://codesandbox.io/s/reach-router-starter-v1-forked-6f44c?file=/src/index.js

Solution 2:^[2]

Depending on the situation you're dealing with, <Redirect /> could also make the work.

<Router>
  <Redirect from="/" path="/home" noThrow />
  <Home path="/home" />
</Router>

Solution 3:^[3]

I think you can do it like you wanted to. Take a look at this: https://reacttraining.com/react-router/core/api/Route/path-string-string

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	roNn23
Solution 2	pianoman
Solution 3	Nikola Ravic

'Multiple path names for a same component in Reach Router

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]