Relative routes react and vite app with netlify

I have a problem deploying my fontend with react and vite on netlify. I’m using react-router-dom and I’ve specified the netlify.toml file, also I’ve tried _redirects, but the nested routes(relative routes) doesn’t work. This is the code:

<BrowserRouter>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route index='.' element={<AnimeList />} />
          <Route path='card/:id?' element={<AnimeCardDetails />} />
        </Route>
      </Routes>
    </BrowserRouter>

and I’ve changed it to :

<BrowserRouter>
     <Header />
      <Routes>
          <Route path='/' element={<AnimeList />} />
          <Route path='/card/:id?' element={<AnimeCardDetails />} />
      </Routes>
    </BrowserRouter>

and it worked but I don’t want it to be like that. can anyone help me??

this is the site link: https://anime-cards.netlify.app/
this is the repo link: GitHub - Khalil-Elemam/anime-list-app: A full-stack web app for managing an anime collection, built with React (frontend) and Spring Boot (backend). and the react app is in anime-list-ui

also this is my first time asking something here. so excuse me if the desciption of the problem isn’t good

We;d be happy tot ake a look. Can you explain what is not working?

the outlet component in the layout doesn’t work, if you notice from the code I’ve shown in the question that I was using layout component so the header component should be rendered on both the two routes of my website but if you go to the website you should see only the header in the first route and if you navigate to the /card route or clicked the add btn not only the outlet or the AnimeCardDetails not shown (Outlet) also the header component completely disappear, when I switched to use absolute routes (not being relative) it worked fine but I want to use the relative routes here becuase this is better, so I’m asking how can I solve this problem, the code on my github now is using relative routes and I don’t want to change it but I’ve made a change and use the absolute routes to be able to make it work on netlify and I deployed manually until I know how to solve this problem, sorry for making it too long :slight_smile:

You’re using relative URLs and not absolute. / is relative.

In what sense is . better than /?

for the second part, the AnimeList component and AnimeCardDetails component share the Header component so this should be rendered as Layout component. and this is best practices (read about Layout routes)

for the first part: using / is an absolute route not relative, I think you don’t know much about react.

Careful what assumptions you make @Khalil_Elemam.

Please link to the relevant documentation.

Can you also link to where you see the following used?

I can find no example where index has a value of .