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

Question

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

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

在我的 Home 组件中，当 link 被点击时 About 组件必须呈现并且 Footer 必须隐藏 & 对于其余路由 Footer 必须渲染。 Footer 是无状态组件。

我尝试在我的 Footer 组件中访问 props.location 但它 undefined 因为 props 是一个空对象 {}

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

Answer 1

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

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

Answer 2

您可以使用 withRouter 在您的 Footer 中访问 props.location。只需用 withRouter 包装 return 值，您将获得与用作 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);

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

Don't render a route on a specific path React Router Native?

javascript

react-router

react-native

react-router-v4

react-router-native