React Router + Redux-在路由更改时分派异步操作？

Question

我有一个使用redux和react-router的通用react应用程序。

我有以下几种路线：

/2016
/2015
/2014
/2013

等等

每个路由都需要来自API的数据。目前，我<Link>在Navigation组件中的元素调度了一个async action
onClick，该操作使用来自该路线的API中的数据填充商店。

对于MVP，我只是post: {}在路线更改时用新的帖子内容覆盖商店中的内容，这样我们就可以获取API上的所有新内容。

我已经意识到在<Link>按钮上设置动作分派器并不是最佳选择，因为单击后退按钮不会重新触发动作分派器以获取上一条路线的内容。

有没有一种方法可以使React Router在发生路线更改时触发调度动作？（将其限制为侦听一组特定的路线将是一个奖励）。

我意识到我应该从商店中获取历史记录，但就目前而言，通过触发操作分派 以获取新内容 更容易再次击中API 。

干杯。

Answer 1

在“生命周期”钩onEnter和onChange在已被删除阵营路由器4，这使得大多数其他的答案对这个问题过时出。

虽然我建议您使用组件 生命周期方法 来实现目标，但这是您的问题的答案，该问题适用于React-router 4。

今天有效的方法是使用由React路由器开发人员自己创建的History库监听历史更改，并从那里分发异步操作。

// history.js
import createHistory from "history/createBrowserHistory"

const history = createHistory()

// Get the current location.
const location = history.location

// Listen for changes to the current location.
const unlisten = history.listen((location, action) => {
    //Do your logic here and dispatch if needed
})

export default history

然后将历史记录导入您的html" target="_blank">应用程序

// App.js
import { Router, Route } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import history from './history';

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <div>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </div>
      </Router>
    )
  }
}

来源：历史库 React
Router文档