Instalando React Router em uma aplicação Redux

Nas lições anteriores, instalamos as principais ferramentas para trabalhar com Redux. Muitas vezes uma aplicação precisa de um roteador para navegar entre suas páginas web, e nossa aplicação não será uma exceção. Para isso instalaremos a biblioteca React Router.

Vamos abrir nosso projeto e digitar no terminal o seguinte comando:

terminalnpm install react-router-dom

Antecipando um pouco, direi que nossa aplicação Redux é tradicionalmente dedicada a produtos, cujas informações são publicadas por alguns vendedores. Portanto, agora vamos modificar um pouco o componente principal App, e também adicionar à aplicação funcionalidade para realizar roteamento.

Para começar, vamos entrar na pasta src, e depois em app e criar aqui o arquivo root.jsx. Este será a raiz do nosso site: à esquerda teremos um menu, e à direita - o conteúdo (por enquanto temos aqui apenas um título):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Products</a>
          <a>Sellers</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>Esta é minha primeira aplicação Redux!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

E o componente App vamos modificar. Primeiro, vamos remover completamente seu conteúdo. Depois importaremos duas funções para o roteador e nosso componente raiz Root:

App.jsximport { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

Abaixo, após a importação, vamos criar o roteador, e registrar a primeira rota, passando nosso Root como elemento a ser renderizado e, consequentemente, definindo o caminho como '/'. Posteriormente, em App, adicionaremos também outras rotas necessárias:

App.jsxconst router = createBrowserRouter([{ path: '/', element: <Root /> }])

Abaixo, vamos escrever o código da função App:

App.jsxfunction App() {
  return <RouterProvider router={router} />
}

export default App

Pronto. Vamos iniciar. Na próxima seção, implementaremos os componentes para o funcionamento da aplicação Redux.

Por fim, vamos adicionar um pouco de estilo, definindo alguns estilos em index.css:

index.cssbody {
  font-size: 24px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
}

a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}

#main {
  display: flex;
  margin: 20px;
}

#menu {
  margin-right: 50px;
  padding-top: 50px;
  padding-right: 50px;
  border-right: 2px solid lightgray;
  font-weight: bold;
}