Como usar o React Router Dom versão 6.26.0 em seu projeto com react js.

This content originally appeared on DEV Community and was authored by Michael Moranis

No nosso projeto estaremos utilizando essas ferramentas: vite react e typescript – então no seu terminal rode esse comando:

npm create vite@latest name-of-your-project -- --template react-ts 

Em seguida vamos importar os componentes que usaremos para configurar e fornecer a navegação na nossa aplicação React.

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

O createBrowserRouter é usado para criar um roteador que utiliza o historico de navegação do navegador, ele cria as rotas e as associa com os componentes correspondentes.

O RouterProvider é usado para fornecer o roteador criado para a aplicação, ele encapsula toda a aplicação, permitindo que os componentes internos utilizem as funcionalidades de roteamento.

Para criar e usar as rotas de fato, precisaremos declarar uma variavel e por convenção essa variável vai ser chamada de router, lembrando que ela deve ser criada no arquivo raiz da sua aplicação, no caso no arquivo main.tsx. Dentro dela vamos usar o createBrowserRouter para definir as rotas para o componente principal representado por “/” e a rota para “about” dessa forma:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
]);

e no seu componente raiz vamos fornecer essas rotas para a aplicação:

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

Assim você conseguirá usar essas rotas no seu projeto !, se você leu até aqui, deixe seu comentário ! valeu !!

This content originally appeared on DEV Community and was authored by Michael Moranis