[解決済み] React-Router 4 キャッチオールルート

質問

私のReactのルートは以下のように定義されています。

...
<Route component={Header} />
<Route exact path="/" component={Landing} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={Footer} />
...

Landing、About、Contactルートにマッチしないものをキャッチし、代わりに404 Not foundページにリダイレクトするキャッチオールルートを定義したい。React Router 4でこれを行うにはどうすればよいですか？

どのように解決するのですか？

この実装を試してみてください

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>
        );
    }