How to manage link in the react?

Question

I am creating simple route and link. I am using react-router-dom v6. When I am clicking the button I am going from http://localhost:3000/home to http://localhost:3000/home/trend. But I need to go to http://localhost:3000/trend. How to do that?

Home index.jsx

<li>
  <Link to="/home">
    <HomeIcon />
    Home
  </Link>
</li>
<li>
  <Link to="trend">
    <WhatshotIcon />
    Trending
  </Link>
</li>

App.jsx

const App = () =>
  <BrowserRouter>
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/trend" element={<Trend />} />
      <Route
        path="/auth"
        element={localStorage.getItem("currentUser")
          ? <Navigate to="/" />
          : <Auth/>
        }
      />
      <Route
        path="/register"
        element={localStorage.getItem("currentUser")
          ? <Navigate to="/" />
          : <Regis/>
        }
      />
      <Route path="/setting" element={<Setting />} />
    </Routes>
  </BrowserRouter>
;

export default App;

Answer 1

If you want the path relative to the root URL, just add a slash / before the path.

<Link to="/trend">
  <WhatshotIcon />
  Trending
</Link>

Because without slash it will be relative to the current path.