基于Route匹配的组件条件展示答案

【问题标题】：Conditional display of component based on Route matching基于Route匹配的组件条件展示
【发布时间】：2021-04-26 10:01:32
【问题描述】：

我希望根据路由（使用 React 路由器）有条件地渲染组件，如果它与数组或某种类似数据结构中预定义的任何路径匹配，则该组件应返回 null，其中我不必依赖<Switch>/<Route> 设置。目前这是我所拥有的，但它显然效率低下且根本不健壮。

const Component = (props) => {
    const path = props.location.pathname;

    const paths_to_hide = ["/path/to/something", "/path/to/A", "/path/to/B"];
    if (paths_to_hide.indexOf(path) != -1) return null;
    
    return (
        <div>test</div>
    );
}

例如，如果我想匹配以下路径：

/path/to/something
/path/to/something/<any path that follows after this>
/path/<random string>/fixed
/newPath/<random string>

请注意，此列表不仅限于 4 个项目，这就是为什么我试图摆脱内联 <Route> 匹配的原因，因为我正在寻找一种更具可扩展性的方法，我可以将其保存在配置文件中并作为数组或类似的数据结构导入。

目前我的实现只能识别第一个项目，没有办法匹配后续项目，使用indexOf()函数。实现这一目标的最佳方法是什么？感谢您的帮助，谢谢！

【问题讨论】：

为什么不使用交换机/路由？如果您确定不想使用 switch / route，那么也许您仍想使用 react-router 中的 match 函数。 match 函数是 react router 用来确定路径是否与定义的路由匹配的函数，如果使用 match 函数，则可以将 react-routers 语法用于动态/通配符路由。
@JacobSmit - 如果我使用开关/路由，那么随着我需要匹配的路径的增长，这不会完全使我的返回函数膨胀吗？似乎不是很冗长。我也在考虑match，但我没有设法找到一种有效的方法来实现它，因为match 数组中的每个元素似乎效率低下，因为这会产生O(n) 的复杂性。

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

所以在进一步阅读 React Router 文档后，我发现了this。这绝对是最理想的解决方案，我最初忽略了这一点。

const Component = (props) => {
    const path = props.location.pathname;

    const paths_to_hide = ["/path/to/something", "/path/to/A", "/path/to/B"];
    return (
        <Switch>
            <Route path={paths_to_hide}>
            </Route>
            <Route>
                <div>test</div>
            </Route>
        </Switch>
    );
}

所以现在我可以创建复杂的路径并且不必遍历数组来匹配它们，因为它由 Route 组件处理，这是理想的，因为现在我可以从配置中导入这个数组文件。

【讨论】：