My React routes are defined as follows:
...
<Route component={Header} />
<Route exact path="/" component={Landing} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={Footer} />
...
I want to define a catch all route that catches anything that does not match the Landing, About or Contact routes, and instead redirects to a 404 Not found page. How can I do it with React Router 4?
Try this implementation
const AppRouter = (props) => {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path="/" component={Landing} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={NotFoundPage} />
</Switch>
<Footer />
</div>
</BrowserRouter>
);
}