Question

我为名为Route的同一组件创建了两个UploadSubmission：

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

在UploadSubmission组件中，我想通过检查返回的查询字符串（例如Add）向用户显示Edit或props.match.params.reviewRound形式。

不过，在path中设置的Route有点问题，因为导航到URL student/upload-submission?submissionId=1时，组件不会加载。

我不确定如何解决此问题。有什么想法吗？

Answer 1

您应该只为组件提供一条路由，然后在组件内部从查询字符串获取值。然后，您可以基于此渲染所需的内容。

示例

路线

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

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)

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

1 个答案:

示例