Question

用例是，我的用户可能会上传一组照片，每个照片都需要与用户将填写的一组元信息相关联。因此，在上传完一组文件后，我想重定向用户到第一张照片的元编辑器页面，然后当他点击＆＃34; next＆＃34;按钮，他去了第二个。

我想知道如何使用react和react-router实现这一点？

Answer 1

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

当您输入此URL（album /：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

React / react-router重定向到一组URL？

2 个答案: