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>

我需要添加一个＆＃34;不匹配＆＃34;路线。查看官方文档，我应该使用Switch方法，然后将此路由放在底部。问题是，我认为，因为我使用了很多嵌套和 CSSTransitionGroup，这是行不通的。 Switch似乎取决于为了工作而立即列出Route。

所以我的问题 - 如何创建一个未找到的＆＃34;页面＃34;有这个设置的路线？

Answer 1

任何没有路径的路线都将始终匹配。无论您是否使用开关。以下应该可以正常工作。但是当你说它很重要。您需要将其与所有创建的顶级路线放在一起。

'C:\Daten\example\project\node_modules\@angular\cli\package.json'

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

Answer 2

我找到了解决方法。我需要将所有路由移到一个 CSSTransitionGroup中，然后将Switch放在其中，同时也将一些位置信息传递给它：

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

404页面与反应路由器（v4）

2 个答案: