带有 React Router (v4) 的 404 页面

Question

我正在构建一个具有一些相对复杂路由的应用程序。它不寻常的原因是我正在为路由本身和使用路由渲染方法设置动画，而不是仅仅调用组件。

所以我的代码在里面看起来像这样 App.js:

// Route 1
<CSSTransitionGroup>
    <Route render=(
        <CSSTransitionGroup>
            // stuff
        </CSSTransitionGroup>
    )/>
</CSSTransitionGroup>

// Route 2
<CSSTransitionGroup>
    <Route render=(
        <CSSTransitionGroup>
            // stuff
        </CSSTransitionGroup>
    )/>
</CSSTransitionGroup>

我从 index.js 调用它：

<Router>
    <Route render={({location}) => (
        <App location={location} />
    )}/>
</Router>

我需要添加一条 "no match" 路线。查看官方文档，我应该使用 Switch 方法，然后将这条路线放在底部。问题是，我认为，因为我使用了很多嵌套和 CSSTransitionGroup，所以这是行不通的。 Switch 似乎需要立即列出 Route 才能工作。

所以我的问题 - 如何使用此设置创建 "page not found" 路线？

Answer 1

任何没有路径的路线将始终匹配。不管你是否使用开关。以下应该可以正常工作。但是，什么时候放它很重要。您需要将它与创建的所有顶级路由一起放置。

<Router>
    <Route render={({location}) => (
        <App location={location} />
    )}/>
</Router>

如果您发现其他路由匹配，即根路由，您可能需要使用 exact 关键字

Answer 2

我找到了解决办法。我需要将我的所有路由移动到 one CSSTransitionGroup 中，然后将 Switch 放入其中，但还要向其传递一些位置信息：

<CSSTransitionGroup ...>
    <Switch location={this.props.location} key={this.props.location.key}>
        <Route ..>
    </Switch>
</CSSTransitionGroup>

带有 React Router (v4) 的 404 页面

404 page with React Router (v4)

reactjs

react-router

react-router-v4