是否有根据网站路径隐藏组件的功能？

Question

在我的反应应用程序中，我目前有这个：

<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

在您的 Footer 组件中，您可以检查 window.location.pathname 是否包含 /test 并返回 null

Answer 2

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

高阶组件只接受一个应该与Footer 组件一起显示的组件，并返回另一个组件，该组件仅与Footer 组件一起呈现包装的组件。

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

  return EnhancedComponent;
}

之后，不再导出PersonList组件，而是需要导出调用WithFooter高阶组件返回的组件，如下图：

function PersonList() {
  ...
}

export default WithFooter(PersonList);

您也需要对应该使用Footer 呈现的其他组件执行相同操作。

高阶组件全部设置完毕，您的路线定义无需更改：

<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>

另一种解决方案是在使用window.location 或useParams() 提供的react-router-dom 钩子检查URL 后有条件地渲染Footer 组件，但useParams() 仅在您的组件使用react router 渲染时才有效。在您的情况下，您将需要window.location。

Answer 3

如果您不熟悉 HOC 模式，另一种选择是将 <Footer/> 组件仅呈现在那些需要它的组件内部，而不是在顶层。

Answer 4

您可以检查页脚内的路线详细信息并根据您的情况进行渲染。如果您使用钩子，React Router >= 5.1 附带 useRouteMatch。如果您使用的是类（或较旧的 React 路由器），则需要使用 withRouter High-Order Component。您也可以自己检查窗口位置，但我建议您使用通过 react router 已经可用的工具。

钩子示例

function Footer() {
  const match = useRouteMatch("/test");

  // You can also use match.isExact when it's avaible to narrow
  // the check down to specifically "/test" but still keep urls
  // such as "/test/some/other/path"
  if (match /*&& match.isExact*/) return null;

  return <footer>This is the footer</footer>;
}

高阶组件示例

class FooterWithRouter extends Component {
  render() {
    if (this.props.location.pathname === "/test") {
      return null;
    }

    return <footer>This is the footer</footer>;
  }
}
const Footer = withRouter(FooterWithRouter);

用于代码示例的 CodeSandbox https://codesandbox.io/s/runtime-cdn-v7icj

https://v7icj.csb.app/ https://v7icj.csb.app/test