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 !!
Top comments (0)