如何在react中管理链接

Question

我正在创建简单的路由和链接。我使用的是react-router-domv6。当我单击按钮时，我将从http://localhost:3000/home转到http://localhost:3000/home/trend。但我需要去http://localhost:3000/trend。如何做到这一点？

主页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

如果想要相对于root URL的路径，只需在路径之前添加斜线/即可。

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

因为如果没有斜线，它将相对于当前路径。