gpt4 book ai didi

javascript - React Router + Redux - 在路由更改时调度异步操作?

转载 作者:可可西里 更新时间:2023-11-01 02:54:31 25 4
gpt4 key购买 nike

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

我有如下几条路线:

/2016
/2015
/2014
/2013

等等

每条路线都需要来自 API 的数据。目前,我有 <Link>导航组件中的元素调度异步操作 onClick ,它使用来自该路由的 API 的数据填充商店。

对于 MVP,我只是覆盖了 post: {}商店中的内容与路线更改时的新帖子内容,这样我们就可以获得 API 上的任何新内容。

我意识到在 <Link> 上有操作调度程序按钮不是最佳选择,因为点击后退按钮不会重新触发 Action 调度以获取先前路由的内容。

有没有办法让 React Router 在路由发生变化时触发调度操作? (限制它收听一组特定的路线将是一个好处)。

我意识到我应该从商店获取历史记录,但目前,通过触发操作分派(dispatch)以获取新内容来再次访问 API 更容易。

干杯。

最佳答案

“生命周期” Hook onEnteronChange 已在 React-router 4 中删除,这使得该问题的大多数其他答案都已过时。

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

今天有效的是使用 History library 监听历史变化由 React 路由器的开发人员自己创建并从那里调度异步操作。

// 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

然后在你的应用中导入历史

// 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>
)
}
}

来源:History library React router docs

关于javascript - React Router + Redux - 在路由更改时调度异步操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37406584/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com