Múltiplas rotas com o mesmo contexto

Esse projeto foi desenvolvido para demonstrar como é possível usar um contexto em mais de uma rota, porém de forma que o mesmo contexto sirva para todas as rotas.

Exemplo

<Router>
  <Switch>
    <Route exact path="/">
      <Home />
    </Route>
    <Route exact path="/produtos">
      <Produtos />
    </Route>
    {/* Este código causa um erro! */}
    {/* Já que um <Switch> só aceita elementos <Route> ou <Redirect> */}
    {/* E abaixo temos um <MyContextProvider> */}
    <MyContextProvider>
      <Route exact path="/produto">
        <Produto />
      </Route>
      <Route exact path="/editar-produto">
        <EditarProduto />
      </Route>
    </MyContextProvider>
  </Switch>
</Router>

Solução

Unir todas as rotas que precisam do mesmo contexto em um único elemento <Route>. Para fazer isso podemos seguir alguns passos:

• Juntar todos os paths e passar para o elemento <Route> como um array
• Colocar os componentes de tela dentro do método render do <Route>
• Usar as props do método render para identificar qual componente deve ser exibido e retornado.

O código abaixo ilustra o que deve ser feito:

<Router>
  <Switch>
    <Route exact path="/">
      <Home />
    </Route>
    <Route exact path="/produtos">
      <Produtos />
    </Route>
    <Route
      exact
      path={["/produto", "/editar-produto"]}
      render={(props) => {
        const {
          location: { pathname },
        } = props;
        return (
          <MyContextProvider>
            {pathname.includes("/produto") ? (
              <Produto />
            ) : pathname.includes("/editar-produto") ? (
              <EditarProduto />
            ) : (
              <Redirect to="/" />
            )}
          </MyContextProvider>
        );
      }}
    />
  </Switch>
</Router>

Atenção!

Cuidado ao fazer if dentro das rotas da sua aplicação, pois se você não retornar um componente nas rotas, as rotas abaixo podem não funcionar corretamente. Retornar só o contexto pode gerar problemas!

Tecnologias

As seguintes tecnologias foram usadas na construção do projeto:

• React
• React Router V5
• Context

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:

• Git
• Node.js
• Npm ou Yarn
• React
• Uma IDE, como o VSCode

Passo a passo

Pelo terminal:

• Faça o clone do projeto em algum local da sua máquina. Exemplo: user/projetos
• Vá até a pasta que você acabou de clonar. Exemplo: cd user/projetos/multiple-routes-with-the-same-context
• Utilizando npm ou yarn, instale as dependências do projeto. Exemplo: execute o comando yarn ou npm i
• Agora, basta executar yarn start ou npm run start e o projeto vai ser executado. Ele vai executar em http://localhost:3000/

Autor

Uéslei Suptitz, amante de desenvolvimento.

• LinkedIn
• uesleisuptitz@gmail.com