React Router issue. Whenever login button is clicked. I am directed to a blank page with the homepage link appended to the login page link is made

Question

Whenever I click the login button, I am navigated to a blank page with the homepage link appended to the login page link. It looks like this: Here is the image

Here is my code for the login button.

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

Here is my index.js code containing the router elements.

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

I am wondering if I am referencing the page properly

Answer 1

You are using react-router-dom@6. Routing/navigation in RRDv6 can use either absolute or relative paths. The difference is a leading "/" for the path. navigate("./homePage") is a relative path from the current location.

The following are the same:

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

The result is that the user is navigated to a "homepage" relative to the current path.

Since "/homePage" is a root route you should use an absolute path.

navigate("/homePage")

navigate("../homePage") could also work since you are in the "/login" route.

Answer 2

You should pass "/homePage" to navigate without the .