Vários nomes de caminho para um mesmo componente no roteador React

Estou usando o mesmo componente para três rotas diferentes:

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

Existe alguma maneira de combiná-lo, para ser como:

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

A partir do react -router v4.4.0-beta.4 e oficialmente da v5.0.0, agora você pode especificar uma matriz de caminhos que resolvem para um componente, por exemplo

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

Cada caminho na matriz é uma string de expressão regular.

A documentação para esta abordagem pode ser encontrada aqui .

Pelo menos com react-router v4, o pathpode ser uma string de expressão regular, então você pode fazer algo assim:

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

Como você pode ver, é um pouco prolixo, então se o seu component/route for simples assim, provavelmente não vale a pena.

E, claro, se isso realmente acontecer com frequência, você sempre poderá criar um componente de agrupamento pathsque .mapaceite um parâmetro de matriz , que faz a regex ou lógica reutilizável.

Não acho que seja se você usar uma versão do React Router anterior à v4.

Você pode usar um mapcomo faria com qualquer outro componente JSX, embora:

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

EDITAR

Você também pode usar uma regex para o caminho no react-router v4 , desde que seja compatível com path-to-regexp . Veja a resposta de @Cameron para mais informações.

A partir do react-route-dom v5.1.2, você pode passar vários caminhos conforme abaixo

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

E obviamente você precisa importar o arquivo Home jsx no topo.

Outra opção: use o prefixo da rota. /pagespor exemplo. Você vai ter

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

E então resolva de forma detalhada dentro do Homecomponente.

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

De acordo com a documentação do Roteador React, o 'caminho' do proptype é do tipo string. Portanto, não há como passar um array como props para o Componente de Rota.

Se a sua intenção é apenas alterar a rota, você pode usar o mesmo componente para uma rota diferente, sem problemas com isso

A partir do react-router v4.4, você pode fazer algo assim abaixo.

armazene o caminho em uma variável e passe abaixo e use '|' Operador.

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

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

então, para todos os caminhos correspondentes, ele renderizará o component={Home}que for de sua necessidade.