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＆＃39导航到页面; s 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上所做的，并且还确保使用缓存快速从API返回数据，例如redis，memcached。

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

使用react-router-redux可以在加载路由状态

1 个答案: