如何在路由器路径更改时从反应组件中删除属性

Question

我想在着陆页上设置一个透明的导航栏，但我不希望它在其他页面上是透明的。有没有办法做到这一点，或者我应该尝试另一种方法？

render() {
return (
  <>
    {
      Route.path === '/' ? <Header transparent={this.state.transparent} /> : <Header />
    }

    <Switch>
      <Route path='/' exact component={Home} />
      <Route path='/aboutus' component={AboutUs} />
      <Route path='/shop' component={Shop} />
    </Switch>
    <Footer />
  </>
);

}

我想做这样的事情或者当路径不同时删除透明的方法属性

这是状态

constructor(props) {
super(props)
this.state = {
  transparent: true,
}
this.listener = null}

剩下的代码是

componentDidMount() {
this.listener = document.addEventListener('scroll', e => {
  let scrolled = document.scrollingElement.scrollTop;
  if (scrolled >= 150) {
    if (this.state.transparent !== false) {
      this.setState({ transparent: false});
    }
  } else {
    if (this.state.transparent !== true) {
      this.setState({ transparent: true});
    }
  }
});

}

  componentDidUpdate() {
document.removeEventListener("scroll", this.listener);

}

伙计们，我能在这里做什么？

Answer 1

要确定当前路径，请使用 useLocation().pathname 挂钩。为此，您需要 6.x 版本的 react-router-dom（甚至不知道在 5.x 上是否有效），然后代码应如下所示：

const pathname = useLocation().pathname
render(
...
{
pathname === '/' ? a : b
}
...
)

Answer 2

您可以通过几种方式完成此操作。最简单的方法可能是在 Header 组件中使用 useRouteMatch 挂钩来测试您希望 header 表现不同的路由。

const Header = () => {
  const match = useRouteMatch({
    pathname: '/',
    exact: true
  });

  return (
    ... JSX ... apply transparent logic on match
  );
}

应用

render() {
  return (
    <>
      <Header />
      <Switch>
        <Route path='/aboutus' component={AboutUs} />
        <Route path='/shop' component={Shop} />
        <Route path='/' component={Home} />
      </Switch>
      <Footer />
    </>
  );
}

或者，如果 Header 不是函数组件，您可以直接在 Route 上渲染，或者使用 withRouter 高阶组件进行装饰，然后检查 location 道具。在 Header 的 render 生命周期方法中检查 this.props.location.pathname.

render() {
  const { location } = this.props;
  const isTransparent = location.pathname === "/";

  return (
    ... JSX ... apply transparent logic
  );
}

如何在路由器路径更改时从反应组件中删除属性

How can i remove a Property from a react component on router path change

javascript

reactjs

react-router

react-component

如何在路由器路径更改时从反应组件中删除 属性

How can i remove a Property from a react component on router path change

javascript

reactjs

react-router

react-component

如何在路由器路径更改时从反应组件中删除属性