React-Router 4 catch all route
Not sure if this will work for you as I have some 3rd party babel wrappers in use, but I get away with declaring all my routes then last putting
<Route path="/*" render={() => <SomeComponent /* possible prop injection */ />}/>
I've used this fairly frequently, but you can also use
<Route render={() => <SomeComponent />} />
I don't use this much as I prefer more landmarks in my code, but I got the above from https://tylermcginnis.com/react-router-handling-404-pages/
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>
);
}