-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add button to 404 page for navigation
Fixes #27 Add a button to the 404 page to navigate back to the landing page or login page. * **NotFound.tsx** - Import `useNavigate` from `react-router-dom` and `useSelector` from `react-redux`. - Add a button that navigates to the landing page if the user is logged in, or to the login page if the user is not logged in. * **App.tsx** - Import the `NotFound` component. - Add a route for the 404 page at the end of the `Routes` component. * **LoginForm.tsx** - Add logic to redirect to the 404 page if the login fails. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/TechPaliyal/LibraryManagement/issues/27?shareId=XXXX-XXXX-XXXX-XXXX).
- Loading branch information
1 parent
cbed86a
commit fabce3e
Showing
3 changed files
with
23 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,28 @@ | ||
|
||
import React from 'react'; | ||
import { useNavigate } from 'react-router-dom'; | ||
import { useSelector } from 'react-redux'; | ||
import { Button } from '@/components/ui/button'; | ||
import { RootState } from '@/store/store'; | ||
|
||
const NotFound = () => { | ||
const navigate = useNavigate(); | ||
const isLoggedIn = useSelector((state: RootState) => state.auth.user !== null); | ||
|
||
const handleBack = () => { | ||
if (isLoggedIn) { | ||
navigate('/'); | ||
} else { | ||
navigate('/library/login'); | ||
} | ||
}; | ||
|
||
return ( | ||
<div className="h-[100vh] w-[100%] flex flex-col justify-center items-center "> | ||
|
||
<h2 className="text-[128px]">404 NotFound</h2> | ||
<p>No routes matched location </p> | ||
|
||
<Button onClick={handleBack}>Go Back</Button> | ||
</div> | ||
) | ||
} | ||
); | ||
}; | ||
|
||
export default NotFound | ||
export default NotFound; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters