使用 react-router-redux 可以在加载路由状态后使用 Link 组件进行过渡

Question

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

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

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

这将触发路由的更改，并在加载新路由时，在本例中为<Movie /> 路由，加载电影页面的状态。

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

这个实现已经在这个question 中讨论过了，在real-world-example 和reddit api example 中使用了在页面转换之间使用加载器的方法

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

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

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>

Answer 1

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

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