Question

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

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

但是，由于设计要求，我也有一个仅在主页/基本路径中不存在时才应呈现的组件。我只能想出一个路径到正则表达式的模式，如果我将一些未使用的参数命名为通配符，则可以实现此目的。

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

我应该使用的path道具有更好的模式吗？还是更好的通用反应路由器范例？除了其他方面，我还考虑过Switch，但我想知道我是否缺少简单的东西。

Answer 1

如果您希望HomeHeroSection组件仅在根路径上渲染，而NavLinks组件仅在任何其他路径上渲染，则这是Switch的用例。来自docs on Switch：

Switch的独特之处在于它唯一地呈现一条路由。相反，每个与位置匹配的内容都会包含。

因此Switch是正确的选择。

在这种情况下，如何使用它：

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

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

请注意，不为path提供Route属性将导致其匹配任何路由（因此，它们应排在最后）。如果用来到达NavLinks组件的位置很重要，则可以像平常一样包含path属性。

编辑：

由于这两个组件不在页面上的同一位置出现，因此您可以对Route仅使用普通的HomeHeroSection，而将Switch用作{ null组件的根路由上的{1}}。这是一个示例：

NavLinks

这将为除根以外的任何路由呈现<main> <Route exact path='/' component={ HomeHeroSection }/> <span>Some other stuff</span> <Switch> <Route exact path='/' render={ null }/> <Route component={ NavLinks }/> </Switch> </main>组件，并且在根路由上不呈现任何内容。

如何将Route匹配除基本（本地）路径以外的任何路径？

1 个答案: