时间戳

首页 > 解决方案 > 基于Route匹配的组件条件展示

javascript - 基于Route匹配的组件条件展示

问题描述

我希望根据路由（使用 React Router）有条件地渲染一个组件，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>
    );
}

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

  1. /path/to/something
  2. /path/to/something/<any path that follows after this>
  3. /path/<random string>/fixed
  4. /newPath/<random string>

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

目前我的实现只能识别第一个项目，没有办法匹配后续项目，使用该indexOf()功能。实现这一目标的最佳方法是什么？任何帮助表示赞赏，谢谢！

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

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

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组件处理，这是理想的，因为现在我可以从配置文件中导入这个数组。

推荐阅读