Question

我在我的应用程序中使用react-router进行程序化导航。对于我要添加的此新功能，一切都很好，它需要条件路由。

例如，当位置为media_id | tag_id 27 | 10 35 | 10 35 | 13时，我需要渲染profileRoutes，例如，当位置为/users/profile时，我需要渲染somethingElse。现在，下面的代码可以正常工作，因为我仅构建了profileRoutes。但是我将路由合并为一个，并需要/users/details或类似的东西，以使该位置匹配与/ users / ...

相关的所有路由。

/users/*

我的问题：是否有一种反应路由器方式来实现这一目标？像<Route children={({ location }) => ( <div> { location.pathname === "/users/profiles" ? <profileRoutes></profileRoutes> : <otherComponent/> } </div> )} />之类的东西？

Answer 1

根据您的要求，请使用参数.map。

要匹配render()或exact或/users：

/users/profiles

仅匹配/users/what-ever

<Route path="/users" component={Users} />

原则上，请执行以下操作：

在主要组件中，使用/users而不使用<Route exact path="/users" component={Users} />指向组件Route
在组件exact中，再次使用Users进行匹配 Users

这里是示例：

Route

codesandbox上的实时演示

Answer 2

感谢您指向正确的方向，即使用比赛！不过，我不需要修改路由（我想将组件分开放置，而只需导入即可。我确实在根组件/上有确切的标签。这是对我有用的东西：

<Route
    children={({ match }) => (
    <div>
    {
    match.path == "/users" ?
    <profileRoutes></profileRoutes> :
    <otherComponent/>
    }
    </div>
    )}
    />

现在，当match.path == "/users"为true时，将渲染所有下游路由，即/users/etc。希望这对其他人有帮助！

react-router location.pathname，例如/ users /，它与/ users / profiles和/ users / details都匹配。 / users / *（如果可以）

2 个答案: