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
Michael Moranis | Sciencx (2024-08-20T01:22:24+00:00) Como usar o React Router Dom versão 6.26.0 em seu projeto com react js.. Retrieved from https://www.scien.cx/2024/08/20/como-usar-o-react-router-dom-versao-6-26-0-em-seu-projeto-com-react-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.