Question

我目前正在使用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。到目前为止一切正常。我还有一个针对我的feeditem的特定减速器，连接了mapstatetoprops。我认为这一切都做对了。

但我现在的问题或疑问如下：

我有一个名为＆＃34; SHOW_FEED_ITEM＆＃34;的动作。如果用户直接导航到url / f / 123，则应使用此操作，但理想情况下，如果单击链接组件，则应使用此操作。

但路由器实际上正在做的是触发 @@ router / LOCATION_CHANGE 操作。从我的reducer中，我能够处理这个动作并发出我自己的动作，但是不会喜欢这个解决方案，因为我必须再次解析路由URL，以便重定向到所有那些行动的正确动作路由。

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

现在回答我的实际问题..

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

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

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

Answer 1

对于那些遇到相同问题和疑问的人：我找到了一个解决方案 - 路由器已经提供了。

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

<强>的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>
}

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

使用react-router / react-router-redux

1 个答案: