反应路由器问题。每当单击登录按钮时。我被定向到一个空白页面，主页 link 附加到登录页面 link

Question

每当我单击登录按钮时，我都会导航到一个空白页面，主页 link 附加到登录页面 link。它看起来像这样： Here is the image

这是我的登录按钮代码。

 <Button onClick={() => {navigate("./homePage")}} className='Createuserbutton'  >Login </Button>

这是我的 index.js 包含路由器元素的代码。

<Router>
<Routes>
  <Route exact path='/login' element={<Login />} />
  <Route exact path='/ModuleReviewForm' element={<ModuleReviewForm />} />
  <Route exact path='/commentBox' element={<CommentBox />} />
  <Route exact path='/homePage' element={<HomePage />} />
  <Route exact path='/logout' element={<Logout />} />
  <Route exact path='/account' element={<Account />} />
  <Route exact path='/searchPage' element={<SearchPage />} />
  <Route exact path='/searchPage' element={<SearchPage />} />
</Routes>

我想知道我是否正确引用了页面

Answer 1

您应该将“/homePage”传递给 navigate 而无需 .

Answer 2

您正在使用 react-router-dom@6。 Routing/navigation 在 RRDv6 中可以使用绝对路径或相对路径。不同之处在于路径的前导 "/"。 navigate("./homePage") 是当前位置的相对路径。

以下相同：

• navigate("./homePage")
• navigate("homePage")

结果是用户被导航到相对于当前路径的“主页”。

由于 "/homePage" 是根路由，您应该使用绝对路径。

navigate("/homePage")

navigate("../homePage") 也可以工作，因为你在 "/login" 路线上。