react中是否有基于网站路径隐藏组件的功能？

Question

在我的react应用程序中，我当前有：

<Router>
    <div class Name="App">
      <Route path="/" exact component={PersonList} />
      <Route path="/rules" exact component={RulesPage} />
      <Route path="/roles" exact component={RolesPage} />
      <Route path="/test" exact component={Test} />
      <Footer />
    </div>
  </Router>

然而，我希望页脚元素被隐藏，如果路由路径是"/test"这将是一个干净得多比写：

<Route path="/roles" exact component={Footer} />
<Route path="/rules" exact component={Footer} />
<Route path="/" exact component={Footer} />

如果有人知道这样做的功能，将不胜感激。

Answer 1

如果您不熟悉HOC模式，另一个选项是呈现

Answer 2

在您的页脚组件中，您可以检查window.location.pathname是否包括/test，然后返回null

Answer 3

您可以创建一个高阶组件来呈现带有页脚的组件，然后可以在除/test之外的所有路径上呈现该高阶组件。

高阶组件仅获取一个应与页脚组件一起显示的组件，并返回另一个组件，该组件仅呈现包装好的组件以及页脚组件。

function WithFooter(WrappedComponent) {
  const EnhancedComponent = (props) => {
    return (
      <>
        <WrappedComponent {...props} />
        <Footer />
      </>
    );
  };

  return EnhancedComponent;
}

在此之后，您不需要导出PersonList组件，而是需要导出通过调用WithFooter高阶组件返回的组件，如下所示：

function PersonList() {
  ...
}

export default WithFooter(PersonList);

您需要对其他应该用页脚呈现的组件也做同样的事情。

使用高阶组件所有设置，您的管线定义无需更改：

<Router>
   <Route path="/" exact component={PersonList)} />
   <Route path="/rules" exact component={RulesPage} />
   <Route path="/roles" exact component={RolesPage} />
   <Route path="/test" exact component={Test} />
</Router>

另一种解决方案是在使用窗口检查URL后有条件地呈现页脚组件。位置或useParams（）钩子由react router dom提供，但是useParams（）仅在使用react router呈现组件时才起作用。在您的情况下，您需要window.location。