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

Question

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

有没有其他方法可以做到这一点？

Answer 1

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

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

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

Answer 2

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