javascript - 不要在特定路径上渲染路由 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是一个无状态组件。

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

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

Answer 1

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

例如，您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是我可以推荐的其中之一。