如何在 React 中监听页面 url 的变化？

Question

我有一个在两个不同页面中呈现的 React 组件，我希望每个页面都有不同的 css。所以我给它传递了一个在 css class 之间切换的道具，但是，因为两个页面之间没有页面刷新，所以我的组件不会更改 css class，仅当我手动刷新页面时，我的组件才会看到我传递的道具并更改 css class。 谁能告诉我如何使组件在页面更改时重新呈现？即使没有页面刷新？ 直到现在，我尝试使用 componentDidUpdate 更改组件的状态，但它最终在无限循环中重新呈现，并且页面不再加载。

还有其他方法吗？

Answer 1

我想你正在使用 react router dom，如果是这样的话，我认为通过执行 useLocation() 获取位置会达到预期的结果，因为当 url 更改时这个钩子会导致重新-使成为 const location = useLocation()

Answer 2

我认为您可以使用 history 解决问题。这将帮助您跟踪 URL 更改。

如果您使用的是功能组件，则可以使用 useParams

我想到的第二个解决方案是使用参数作为组件的键，这将强制重新渲染。