/* You can implement routing to your "Error 404 Page Not Found" page in a

React application using React Router. Use a wildcard asterisk "*" path for

the last route, along with your <PageNotFound /> element that you want

your application to render as the error page. This route will take place

whenever the user's URL input does not match with any of the paths of the

other routes above it. */

import ReactDOM from "react-dom/client";

import { BrowserRouter, Routes, Route } from "react-router-dom";

​

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

  <BrowserRouter>

    <Routes>

      ...

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

    </Routes>

  </BrowserRouter>

);

import React from 'react';

import { BrowserRouter,Routes,Route} from 'react-router-dom';

import Home from "./Pages/Home"

import Allposts from './Pages/Allposts'

import Createpost from './Pages/Createpost'

import Error404 from './Pages/Error404'

​

const App = () => {

    return(

        <>

        <BrowserRouter>

            <Routes>

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

                <Route path="/all-posts" element={<Allposts />}/>

                <Route path="/create-post" element={<Createpost />} />

                <Route path="*" element={<Error404 />} />

            </Routes>

        </BrowserRouter>

        </>

    )

}

​

export default App;

import React from 'react';

​

const PageNotFound= () =>(

    <div>

        <h1>404 Error</h1>

        <h1>Page Not Found</h1>

    </div>

)

​

export default PageNotFound;

​

//you can do this only with react router dom 

//just do this

<Route path="*" element={<ErrorPage/>} />

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

<Route  element={<ErrorPage/>} />

​

  //* in react router dom mean 404 error page