React Router tutorial in Hindi #5 Page not found and 404 Page and Redirection

What is 404 page

Make Route for 404 Page

Make 404 Page

Redirect from 404 Page

Interview Question

A 404 page is a web page shown to users when the page they are trying to visit cannot be found on the server.

import { Navigate, Route, Routes } from 'react-router'

import Home from './Home'

import About from './About'

import Login from './Login'

import NavBar from './NavBar'

import PageNotFound from './PageNotFound'

import College from './College'

import Student from './Student'

import Department from './Department'

import Details from './Details'

function App() {

return (

<>

<NavBar />

<Routes>

<Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

<Route path="/login" element={<Login />} />

<Route path="/college" element={<College />}>

<Route path='student' element={<Student />} />

<Route path='department' element={<Department />} />

<Route path='detail' element={<Details />} />

</Route>

{/* <Route path='/*' element={<PageNotFound />} /> */}

<Route path='/*' element={<Navigate to="/" />} />

</Routes>

</>

)

}

export default App

import { Link } from "react-router";

export default function PageNotFound(){

return(

<div style={{textAlign:'center'}}>

<h1>Page Not Found</h1>

<div>

<Link to="/">Go to Home Page</Link>

</div>

<img style={{width:"60%"}} src="https://admiral.digital/wp-content/uploads/2023/08/404_page-not-found.png" alt="" />

</div>

)

}