我有几个按钮作为路径。每次改变路线时，我都想确保激活的按钮发生了变化。
有没有办法在react路由器v4中监听路由变化?
当前回答
对于React路由器v6和React钩子， 你需要使用useLocation而不是useHistory，因为它已被弃用
import { useLocation } from 'react-router-dom'
import { useEffect } from 'react'
export default function Component() {
const history = useLocation();
useEffect(() => {
console.log('> Router', history.pathname)
}, [history.pathname]);
}
其他回答
我使用withRouter来获取位置道具。当组件因为一个新的路由而更新时，我检查值是否发生了变化:
@withRouter
class App extends React.Component {
static propTypes = {
location: React.PropTypes.object.isRequired
}
// ...
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
this.onRouteChanged();
}
}
onRouteChanged() {
console.log("ROUTE CHANGED");
}
// ...
render(){
return <Switch>
<Route path="/" exact component={HomePage} />
<Route path="/checkout" component={CheckoutPage} />
<Route path="/success" component={SuccessPage} />
// ...
<Route component={NotFound} />
</Switch>
}
}
v5.1引入了有用的钩子useLocation
https://reacttraining.com/blog/react-router-v5-1/#uselocation
import { Switch, useLocation } from 'react-router-dom'
function usePageViews() {
let location = useLocation()
useEffect(
() => {
ga.send(['pageview', location.pathname])
},
[location]
)
}
function App() {
usePageViews()
return <Switch>{/* your routes here */}</Switch>
}
对于React路由器v6和React钩子， 你需要使用useLocation而不是useHistory，因为它已被弃用
import { useLocation } from 'react-router-dom'
import { useEffect } from 'react'
export default function Component() {
const history = useLocation();
useEffect(() => {
console.log('> Router', history.pathname)
}, [history.pathname]);
}
我刚刚处理了这个问题，所以我将把我的解答作为其他答案的补充。
这里的问题是useEffect并没有像您希望的那样工作，因为调用只在第一次呈现之后才被触发，因此存在不必要的延迟。 如果您使用一些状态管理器，如redux，您很可能会在屏幕上看到闪烁，因为存储中存在持续的状态。
你真正想要的是使用uselayouteeffect，因为它会立即被触发。
所以我写了一个小的实用函数，我把它放在和路由器相同的目录中:
export const callApis = (fn, path) => {
useLayoutEffect(() => {
fn();
}, [path]);
};
我从组件HOC中调用它，如下所示:
callApis(() => getTopicById({topicId}), path);
path是使用withRouter时在match对象中传递的道具。
我真的不赞成手动地听/不听历史。 这只是我的看法。
withRouter,历史。listen，和useEffect (React Hooks)一起工作得很好:
import React, { useEffect } from 'react'
import { withRouter } from 'react-router-dom'
const Component = ({ history }) => {
useEffect(() => history.listen(() => {
// do something on route change
// for my example, close a drawer
}), [])
//...
}
export default withRouter(Component)
侦听器回调将在路由更改时触发，并返回历史记录。listen是一个关闭处理程序，可以很好地与useEffect一起使用。
