在网址更改我想重新渲染我的组件我应该怎么做

Question

我有两个获取样本组件的链接,但当我点击其中任何一个时,它会被加载,当我点击另一个时,它不会再渲染,只有url被更改.我想在两个链接点击上重新渲染组件.Is有什么办法吗？

Answer 1

当我在做一个反应项目时,我在某个时候遇到了类似的问题.

您需要在组件中使用componentWillReceiveProps函数.

  componentWillReceiveProps(nextProps){
     //call your api and update state with new props
  }

通过调用url www.example.com/content/a首次加载组件时,可以更清晰地 componentDidUpdate运行.

现在,当您单击另一个链接时,请说www.example.com/content/b调用相同的组件,但此时道具更改,您可以访问此新的道具componentDidMount(),您可以使用该道具 调用api并获取新数据.

现在你可以保持一个常见的函数说_initializeComponent()并从componentDidMount()和componentWillReceiveProps()调用它

您的路由器看起来像这样: -

componentDidUpdate (prevProps, prevState) {
  // update state 
}

所以,现在当你调用www.example.com/content/a,一个会被当作废料.如果您在www.example.com/content/b中调用该组件,则b将被视为slug,并且可在componentWillReceiveProps中作为nextProps参数使用.

希望能帮助到你!!

Answer 2

使用位置挂钩。

const location = useLocation();

const renderDOM = () => {
 // return your DOM, e.g. <p>hello</p>
}

useEffect(() => {
 // re render your component
 renderDOM();
},[location]);

return (
 <>
 {renderDOM()}
 </>
);