markdown 历史监听器（反应路径4），历史路径名的动态行为

Posted 2021-05-05

[ref](https://github.com/ReactTraining/react-router/issues/3554)

```tsx
import React from 'react'
import { withRouter, RouteComponentProps } from 'react-router';

type PropsType = RouteComponentProps<any> & {
}

class HistoryListener extends React.Component<PropsType> {
  constructor(props: PropsType) {
    super(props);

    //Here ya go
    this.props.history.listen((location, action) => {
      console.log("on route change", location);
      console.log('action', action)
    });
  }

  render() {
    return (
      <div></div>
    )
  }
}

export default withRouter(HistoryListener);
```

log
```
on route change {pathname: "/persons", search: "", hash: "", state: undefined, key: "7am32a"}hash: ""key: "7am32a"pathname: "/persons"search: ""state: undefined__proto__: Object
HistoryListener.tsx:14 action PUSH
HistoryListener.tsx:13 on route change {pathname: "/rites", search: "", hash: "", state: undefined, key: "tui5gj"}
HistoryListener.tsx:14 action PUSH
HistoryListener.tsx:13 on route change {pathname: "/persons", search: "", hash: "", state: undefined, key: "7am32a"}
HistoryListener.tsx:14 action POP
```

Dynamic behaviors by history pathname  
https://github.com/godon019/Temple-Resource-Management/commit/29c79960fa6c2e6b516df7ab5d3259301e6d8567