DEV Community

Cover image for Como usar o React Router Dom versão 6.26.0 em seu projeto com React js.
Michael Moranis
Michael Moranis

Posted on

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

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 
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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 />,
  },
]);
Enter fullscreen mode Exit fullscreen mode

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>,
)
Enter fullscreen mode Exit fullscreen mode

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

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more