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

Question

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

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

在我的Home 组件中，当单击链接时About 组件必须呈现&Footer 必须隐藏& 其余路由Footer 必须呈现。 Footer 是一个无状态组件。

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

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

Answer 1

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

例如，您的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

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

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