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 !!