Question

我正在使用React Router Native我想隐藏特定路径上的组件

<NativeRouter history={nativeHistory}>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Footer />
</NativeRouter>

点击链接后，在我的Home组件中About组件必须呈现＆amp; Footer必须隐藏＆amp;其余路线Footer必须渲染。 Footer是无国籍组件。

我已尝试访问props.location组件中的Footer，但其undefined因为props是空对象{}

我的问题是如何将一个路径列入黑名单而不渲染特定组件？

Answer 1

您可以使用withRouter访问props.location中的Footer。只需使用withRouter包装返回值，您将获得与用作Route组件的其他组件相同的道具。

例如，您的Footer.js应该是这样的：

import { withRouter } from 'react-router-dom';

class Footer extends React.Component {
  render() {
    ...
    // here you can access this.props.location and this.props.match
  }
}

export default withRouter(Footer);

Answer 2

在Footer组件上，您可以检查currentPath并相应地渲染组件。我没有使用React Router Native，所以我真的不知道你怎么做。

我建议你使用一些更新的并且仍在维护的导航组件。 React-Navigation是我可以推荐的其中之一。

不要在特定路径上渲染路由React Router Native？

2 个答案: