0

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

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

然后链接可以是 /f/123 之类的东西。因此，当我单击导航到项目 123 的链接时，组件 FeedItem 被加载。到目前为止，一切正常。我的 feeditem 也有一个特定的 reducer，connected mapstatetoprops。我认为这一切都做得很好。

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

我有一个名为“SHOW_FEED_ITEM”的操作。如果用户直接导航到 url /f/123，则应使用此操作，但理想情况下，如果单击 Link 组件，也应使用此操作。

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

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

现在来到我的实际问题..

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

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

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

4

1 回答 1

1

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

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

进入

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

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

于 2016-05-12T13:51:14.330 回答