How Do I Add A 404 Page In React?

We are going use react-router-dom to show 404 page.

npm install –save react-router-dom

index.js

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import { BrowserRouter} from ‘react-router-dom’;

import ‘./index.css’;

import App from ‘./App’;

import reportWebVitals from ‘./reportWebVitals’;

ReactDOM.render(

<React.StrictMode>

<BrowserRouter>

<App />

</BrowserRouter>

</React.StrictMode>,

document.getElementById(‘root’)

);

index.js

import React, { Component} from ‘react’;

import {Switch, Route} from ‘react-router-dom’;

class App extends Component{

render(){
return(
<Switch>
<Route exact path=“/” render={() => <h2>Home Page</h2>} />
<Route exact path=“/about” render={() => <h2>About Page</h2>} />
<Route exact path=“/contact” render={() => <h2>Contact Page</h2>} />
<Route render={() => <h2>Not Found</h2>} />
</Switch>
)
}
}
}

export default App;