使用react router redux可以在加载路由状态后使用链接组件进行转换

Question

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

一个问题似乎是当我需要使用

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

这将触发路由的更改，并加载新路由，在这种情况下

对于页面之间的转换，这并不能很好地工作，因为新页面在导航时将是空白的，或者您可以放入加载程序，但在加载新页面的api调用之前，它不应该导航到新页面。类似于pitchfork这样的网站。com或theguardian。通用域名格式

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

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

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

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

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

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

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

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

因此这会使

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




Answer 1

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

以下是我制作的库，其中显示了自定义react路由器redux链接组件：https://github.com/StevenIseki/react-router-redux-link