javascript - 如何将 Route 匹配到除基本(主)路径之外的任何路径？

Question

我很喜欢使用 react-router 根据位置有条件地进行渲染。例如，我有一个仅在我位于主页上时才呈现的组件，如下所示:

<Route
    exact={ true }
    path="/"
    render={ HomeHeroSection }
/>

但是，由于设计要求，我还有一个组件，如果不在主页/基本路径中，则只应呈现该组件。如果我将一些任意未使用的参数命名为一种通配符，我只能想出一个路径到正则表达式的模式来实现这一点。

<Route
    path="/:foo+"
    render={ NavLinks }
/>

对于我应该使用的 path Prop ，是否有更好的模式？或者也许是更好的通用 react 路由器范例？我考虑过 Switch 等，但我很好奇我是否遗漏了一些简单的东西。

Answer 1

如果您希望 HomeHeroSection 组件仅在根路径上呈现，而 NavLinks 组件仅在任何其他路径上呈现，这就是 切换。来自docs on Switch :

Switch is unique in that it renders a route exclusively. In contrast, every that matches the location renders inclusively.

所以 Switch 是这里的正确调用。

在这种情况下您可以使用它:

<Switch>
    <Route exact path='/' component={ HomeHeroSection }/>
    <Route component={ NavLinks }/>
</Switch>

请注意，Route 组件的顺序在这里很重要，因为 Switch 呈现第一个子Route匹配位置。

请注意，不为 Route 提供 path 属性将导致它匹配任何路由(因此这些应该按顺序排在最后)。如果用于到达 NavLinks 组件的位置很重要，您可以像往常一样包含 path 属性。

编辑:

由于这两个组件没有出现在页面上的相同位置，您可以像您已经使用的那样为 HomeHeroSection 使用普通的 Route 和 Switch 在 NavLinks 组件的根路径上呈现 null。这是一个例子:

<main>
    <Route exact path='/' component={ HomeHeroSection }/>

    <span>Some other stuff</span>

    <Switch>
        <Route exact path='/' render={ null }/>
        <Route component={ NavLinks }/>
    </Switch>
</main>

这将为根路径以外的任何路径呈现 NavLinks 组件，并且不会在根路径上呈现任何内容。