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 。