使用 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 等网站

这个问题已经讨论了这个实现，并且在真实世界的例子和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>

Answer 1

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

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