使用react router/react router redux将特定的redux操作绑定到一个路由

Bind specific redux action to one Route using react-router / react-router-redux

本文关键字：router redux react 一个 路由 操作 使用 绑定      更新时间：2023-09-26

我目前正在react中使用redux、react router（带有pushState History）和react router-redux开发一个应用程序。我目前正在做的是将我的路由绑定到特定的组件，就像我在每个文档中看到的最佳实践一样：

export default function (store) {
  return <Route path='/' component={CoreLayout}>
    <Route path="feed" components={{content: Feed}} />
    <Route path="f/:id" components={{content: FeedItem}} />
  </Route>
}

然后，我在Feed组件中有一个链接组件，它负责显示一个特定的条目：

<Link to={{ pathname: '/f/' + item.id + '-' + urlSlug(item.title) }}>{item.title}</Link>

然后链接可以是类似/f/123的内容。因此，当我点击导航到项目123的链接时，就会加载FeedItem组件。到目前为止一切都很好。我还有一个特定的reducer，用于我的提要项，连接的mapstatetoprops。我认为这一切都做得很好。

但我现在的问题是：

我有一个动作叫做"SHOW_FEED_ITEM"。如果用户直接导航到url/f/123，则应使用此操作，但理想情况下，如果用户单击链接组件，也应使用该操作。

但路由器实际执行的是启动@@router/LOCATION_CHANGE操作。在我的reducer中，我可以处理这个操作并调度我自己的操作，但我不喜欢这个解决方案，因为我必须从那里第二次解析路由url，以便重定向到所有这些路由的正确操作。

我现在正在做的是在我的mapStateToProps函数中接收props.id（来自Route f/：id），并将其传递给我的组件。这是我的组件产生正确id的方式。

现在来谈谈我的实际问题。。

告诉路由器它应该处理哪个操作，而不是只告诉他应该加载哪个组件，这不是更好吗？

我知道我可以在链接中添加一个onClick处理程序来调度我的操作，但这只会影响对链接的点击，而不会影响浏览器的来回浏览，甚至不会刷新用户操作。

这可能现在就已经可能了吗？你们是怎么处理的？

对于遇到相同问题的人：我发现react router已经提供了一个解决方案。

每个路线都有一个onEnter和onLeave属性。这基本上是一个路由的回调函数，在路由呈现之前被挂起。

onEnter

<Route path="route/:id" components={{content: MyComponent}} onEnter={()=>store.dispatch(myComponentsEnterAction())} />

onLeave

<Route path="route/:id" components={MyComponent} onLeave={()=>store.dispatch(myComponentsLeaveAction())} />

下面是上面例子的完整路由器代码：

import React from 'react'
import { Route } from 'react-router'
import CoreLayout from './layout/corelayout'
import Feed from './components/feed/feed'
import FeedItem from './components/feed-item/feed-item'
export default function (store) {
  return <Route path='/' component={CoreLayout}>
    <Route path="feed" components={{content: Feed}} onEnter={()=>store.dispatch(displayFeed())} />
    <Route path="f/:id" components={{content: FeedItem}} onEnter={()=>store.dispatch(displayFeedItem())} />
  </Route>
}

更多信息可以在这里找到：

  • https://github.com/reactjs/react-router/blob/master/docs/Glossary.md#route
  • https://github.com/reactjs/react-router/blob/master/docs/Glossary.md#enterhook
相关文章：