reactjs – React router dom V6 redirect to double path

admin

I have a problem with react router V6. I didnt added the BrowserRouter to the main.tsx.

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,

I need to display the header only in specific locations. I read that I can do it by mentioning multiple elements inside the elements of a route. So I added :

            <Route path="invoices-list" element={<InvoicesListPage />} />

            <Route path="invoice-details" element={(
              <>
                <Header />
                <InvoiceDetails />
              </>
            )} />

So in the code above, I need to render the Header component only in the invoice-details route.

  1. I tried from the URL to navigate between pages, but if I navigate to different route from the header, my location just adds a route on top of the existing one.
    For example, if i am on /profile and want to navigate to invoice-details , the
    url path transofrms in /profile/invoice-details…

So if i configured the header with the links, the paths are concatinating

<Link to={'signup'}>Inregistreaza-te</Link>
<Link to={'login'}>Login</Link>

Read more here: Source link