Crie um novo projeto React com Vite.

npm create vite@latest

Instale as dependências necessárias:

npm install prop-types react-router-dom

Comece removendo o conteúdo inicial desnecessário do Vite e atualize os estilos do arquivo “index.css”:

• index.css

Agora crie o roteador da aplicação:

Obs.: iremos criar os componentes necessários para que o roteador funcione logo em seguida.

import { createBrowserRouter } from "react-router-dom";
import RootLayout from "./pages/RootLayout";
import ItemsLayout from "./pages/items/Layout";
import ListItems from "./pages/items/ListItems";
import CreateItem from "./pages/items/CreateItem";
import ShowItem from "./pages/items/ShowItem";
import UpdateItem from "./pages/items/UpdateItem";
import Home from "./pages/Home";

const router = createBrowserRouter([{
  path: "/",
  element: <RootLayout />,
  children: [
    { index: true, element: <Home /> },
    {
      path: "items",
      element: <ItemsLayout />,
      children: [
        { index: true, element: <ListItems /> },
        { path: "new", element: <CreateItem /> },
        { path: ":id", element: <ShowItem /> },
        { path: ":id/update", element: <UpdateItem /> }
      ]
    }
  ]
}])

export default router;

Agora, crie a pasta “pages” e os componentes de cada tela da aplicação:

• Home.jsx
• RootLayout.jsx
• ListItems.jsx
• CreateItem.jsx
• ShowItem.jsx
• UpdateItem.jsx
• Layout.jsx

Por fim, adicione o roteador ao componente principal “App.jsx”:

import { RouterProvider } from "react-router-dom"
import router from "./router"

function App() {

  return (
    <RouterProvider router={router} />
  )
}

export default App