React / React-Router重定向到一组URL？

Question

用例是，我的用户可能上传了一组照片，每个照片都需要与用户将要填写的一组元信息相关联。因此，在上传了这组文件之后，我想将用户重定向到第一张照片元编辑器页面，然后单击“下一步”按钮，则转到第二个。

我想知道如何使用react和react-router实现它？

Answer 1

这是我采取的方法。 首先将所有图片上传到服务器，然后创建一个新相册或一个临时数据结构来存储所有上传图片的图像ID。 然后重定向到带有相册ID的新网址。 例如-重定向到<domain.com>/album/:id

当您输入此URL（相册/：id）时，查询图像列表并遍历图像。 网址看起来像<domain.com>/album/:id/photo/photo_id

甚至facebook也做类似的事情。

Answer 2

使用更新的react-router v4，您可以像这样轻松地在render()方法中设置重定向

  render() {
    const { uploadsCompleted } = this.state

    return (
      <div>
        {uploadsCompleted && (
          <Redirect to={`/uploads/1`}/>
        )}
        <div>
          {/* Your upload progress info goes in here and is only displayed when the uploads are still in progress. */}
        </div>
      </div>
    );
  }

要处理文件上传并跟踪上传进度，您可以使用react-fileupload ，它允许您挂接到uploadSuccess或上uploading事件，以便可以跟踪进度并发出setState来将uploadsCompleted状态键设置为true ，从而强制执行上传完成后重定向到第一张图片，前提是您已正确设置了路线Match 。