React-Router 4捕获所有路由

Question

我的React路由定义如下：

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

我想定义一个“全部捕获”路由，以捕获与着陆，“关于”或“联系”路由不匹配的所有内容，而是重定向到“ 404找不到”页面。我该如何使用React Router 4？

Answer 1

不确定这是否适合你，因为我有一些 3rd 方 babel 包装器正在使用中，但我没有声明我的所有路线然后最后一次放置

<Route path="/*" render={() => <SomeComponent /* possible prop injection */ />}/>

我经常使用它，但你也可以使用

<Route render={() => <SomeComponent />} />

我不经常使用这个，因为我更喜欢我的代码中的更多地标，但我从https://tylermcginnis.com/react-router-handling-404-pages/得到了上述内容

Answer 2

试试这个实现

const AppRouter = (props) => {
        return (
            <BrowserRouter>
                <div>
                    <Header />
                    <Switch>
                        <Route component={Header} />
                        <Route exact path="/" component={Landing} />
                        <Route path="/about" component={About} />
                        <Route path="/contact" component={Contact} />
                        <Route component={Footer} />
                        <Route component={NotFoundPage} />
                    </Switch>
                </div>
            </BrowserRouter>
        );
    }