reactjs - 同一组件具有不同查询字符串的两条路由

Question

我Route为同一个组件创建了两个，称为UploadSubmission：

<Route exact path='/student/upload-submission?reviewRoundId=:reviewRoundId' component={UploadSubmission} />
<Route exact path='/student/upload-submission?submissionId=:submissionId' component={UploadSubmission} />

在组件内部，UploadSubmission我想通过检查返回的查询字符串（例如.AddEditprops.match.params.reviewRound

但是， 中的path集合在Route某种程度上存在问题，因为当导航到 urlstudent/upload-submission?submissionId=1时，组件不会加载。

我不确定如何解决这个问题。有任何想法吗？

标签： reactjs

Answer 1

您应该只有一个组件路由，然后在组件内部从查询字符串中获取值。然后你可以根据它渲染你需要的东西。

例子

路线

<Route exact path='/student/upload-submission' component={UploadSubmission} />

上传提交.js

import React from 'react'
import { withRouter } from 'react-router'

const UploadSubmission = ({
  match: {
    params: {
      reviewRoundId = null,
      submissionId = null,
    },
  },
}) => {
  if(reviewRoundId) {
    return (
      <span>Review: {reviewRoundId}</span>
    )
  }

  return (
    <span>Submission: {submissionId}</span>
  )
}

export default withRouter(UploadSubmission)