react之react-router v6

Posted 2023-04-29

参考技术A 项目中需要安装对应的react-router-dom包:

在项目下建立一个routes.jsx的文件，用于配置路由：

需要使用useRouts这个函数去调用路由数组：

在index.js中传入<App />组件：

在对应的需要使用子路由的User.jsx下传入<Outlet />组件：

这样就完成了一个简单的二级路由的使用

使用 React-Router 和 Redux 时单击链接时如何调度操作？

【中文标题】使用 React-Router 和 Redux 时单击链接时如何调度操作？

【英文标题】：How to dispatch an action when clicking on Link when using React-Router & Redux?

【发布时间】：2016-11-17 14:38:44

【问题描述】：

假设我有一个Link，它将我发送到一个用于添加/编辑列表条目的页面。

当我点击 Link 本身时，如何调度 Redux 操作，以便在实际重定向到该页面之前先更新 Redux 存储。

例如： 我点击编辑按钮 -> 动作被调度 -> 存储更新，'state': 'edit-mode' -> 继续重定向。

或者你有其他方法来完成我想要做的事情？

也许当组件挂载后，我会根据某些条件运行stateToEdit 之类的操作？如果是这样，那么请告诉我你的方式。谢谢

PS：我只使用一个组件来进行所有添加/编辑/删除。所以我正在考虑一种基于state 进行渲染的方法，无论是edit-mode 还是delete-mode 等。

【问题讨论】：

您可以使用 browserHistory.push(path) 和 onClick 函数，而不是使用 Link。在此函数中，调度您的操作，然后推送到新位置。

我也在考虑类似的事情，但我不太确定这是否是解决问题的正确方法。我想我现在会使用这种方法。如果还有其他方法，那么我想知道。谢谢

解决此问题的更合适的方法可能是引入redux-thunk，考虑到您可能想要执行此“发送某些内容，然后移至另一个页面”，这可能有助于更多地组织代码在不同的地方采取行动。在这里看看 Dan 的回答，我相信它会让你了解如何在你的上下文中解决这个问题：***.com/questions/35493352/…

^ 就像这样，设想将其中一个 dispatch(increment) 调用替换为对 browserHistory 的调用

感谢您的回复和信息。你能把你的回复作为答案让我接受吗？

【参考方案1】：

您可以通过以下几种方式解决此问题：

不要使用Link，而是尝试使用browserHistory.push(path) 和onClick 函数。 在onClick 内，您可以dispatch 您的操作，然后push 到一个新位置。 但是，如果您想在各个组件中执行这一系列操作，您可能会遭受代码重复的困扰。 解决此问题的更可靠的方法是实现redux-thunk，它提供了一种通用的方式来执行多个“操作”（无论是调用 Redux 操作，还是执行异步操作，或两者兼而有之！）作为响应改变。 Dan 在这里给出了很好的回应，强调了 redux-thunk 实际提供的简单性：Can I dispatch multiple actions without Redux Thunk middleware? 在您的情况下，在 incrementTwice 函数中，假设只需将其中一个 dispatch(increment) 调用替换为对 browserHistory.push(action.path) 的调用，类似于以下内容：

Redux thunk 动作

export const dispatchThenRoute = (myAction, myPath) => 
    return (dispatch) => 
        dispatch(myAction)
        browserHistory.push(myPath);
    
; 

【讨论】：

如果我们采用这种方法，链接预取将不起作用。我对么？或者如何让它发挥作用！

react-router v4 中没有browserHistory：如果没有要推送的内容，如何处理调度和推送？

@Aerendir 您可以使用withRouter(App) HOC 将组件连接到路由器。在此之后，App 现在可以访问props 中的location 和history。像往常一样推动历史。示例export default withRouter(App); 通过github.com/mikechabot/react-boilerplate/blob/master/src/…

<Link to="mypath" onClick=this.props.dispatchAction.bind(this)>... 有什么问题？

@Sumit 你可以这样做，但如果你通过自己的onClick 推送到某个位置（请参阅github.com/ReactTraining/react-router/blob/master/packages/…），你会加倍路由。