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

Question

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

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组件，它负责显示一个特定的条目：

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

该链接可以类似于/ f / 123。 因此，当我单击导航到项目123的链接时，就加载了FeedItem组件。到目前为止，一切工作正常。 我还为我的feedite提供了一个专用的reducer，将mapstatetoprops连接起来。 我认为这一切做对了。

但是我现在的问题是：

我有一个类似“ SHOW_FEED_ITEM”的动作。 如果用户直接导航到url / f / 123，则应该使用此操作，但是如果用户单击“链接”组件，则也应该使用此操作。

但是路由器实际上正在做的是触发@@ router / LOCATION_CHANGE操作。 在我的reducer内部，我能够处理此动作并调度自己的动作，但是我不希望使用此解决方案，因为我不得不从那里第二次解析路由URL才能重定向到所有这些路由的正确动作。

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

现在是我的实际问题。

告诉路由器应该处理哪个动作，而不是告诉路由器应该加载哪个组件，会更好吗？

我知道我可以在链接上添加onClick处理程序，以调度我的操作，但这只会影响对链接的点击，不会影响浏览器的前进/后退甚至刷新用户操作。

这也许现在已经可能了吗？ 你们如何处理？

Answer 1

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

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

onEnter

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

休假

<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