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 i I am referencing
CodePudding user response:
You should pass "/homePage" to navigate
without the .
CodePudding user response:
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.