How to manage link in the react?-CodePudding

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;

CodePudding user response：

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.