1

我一直在使用react-router-redux，它允许我的位置很好地存储在状态中，并允许我使用 react-router 来定义路由和路由之间的链接。

一个问题似乎是，当我需要使用<Link />这样的组件进行导航时：

<Link to={`/movie/${m.id}`}>
    <p>{m.name}</p>
</Link>

这将触发路由的更改，并在加载新路由时，在这种情况下是<Movie />路由，加载电影页面的状态。

这对于页面之间的转换并不能很好地工作，因为新页面在导航时将是空白的，或者您可以放入一个加载器，但实际上它不应该导航到新页面，直到新页面的 api 调用已经加载。类似于pitchfork.com或theguardian.com等网站

这个实现已经在这个问题中讨论过，并且在真实世界示例和reddit api 示例中使用了在页面转换之间仅使用加载器的方法

我的问题是，如果我想在导航之前在我的站点中加载新容器/路由的状态，我是否需要遵循 dax chen 在这个问题中建议的方法？

总而言之，答案是触发一个动作并使用 redux-thunk 我们可以通过调用新容器/路由的动作来预加载状态，然后在完成时我们使用 react-router-redux 的push()动作导航到页面

store.dispatch(push('/foo'))

如果这是在转换之前预加载页面的推荐方法，那么我将更改我的react-router-redux-example和我当前的站点以使用这种方法。

加载新路线数据然后导航的操作将如下所示：

function fetchInit(url, id, to) {
  return dispatch => {
    return dispatch(fetchMovie(url, id))
      .then(function(home) {
        return dispatch(push(to))
      })
  }
}

它将需要一些逻辑来识别要调用的新容器的操作以及要导航到的新路径。fetchData()它可能会调用新页面的容器组件上的静态方法。

所以这会使<Link />组件有些复杂，我只是在寻找一些关于这是否是正确方法的建议，或者我可能错过了更简单更推荐的方法。

<Link onClick={ () => dispatch(navigate(`/movie/${m.id}`, 'Movie')) } >
    <p>{m.name}</p>
</Link>
4

1 回答 1

0

我做了一个解决这个问题的实现，并且可以制作任何类型的自定义链接组件并让它以你喜欢的任何方式运行，但是在更改为之前等待一个长的加载事件可能不是一个好主意一条路线，因为用户希望路线转换是即时的。更好的方法是使用一个不错的加载器并将其很好地混合到您的页面设计中，类似于在pitchfork.com上所做的，并且还可以使用缓存（例如 redis、memcached）确保数据从 API 快速返回。

这是我制作的显示自定义 react-router-redux 链接组件的库：https ://github.com/StevenIseki/react-router-redux-link

于 2016-06-30T14:07:48.817 回答