CODEWITHSUNDEEP
reactjs
renakre
renakre

Reputation: 8311

Two routes with different query strings for the same component

I have created two Route for the same component called UploadSubmission:

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

Inside the UploadSubmission component, I want to show Add or Edit form to the user by checking the query strings returned, such as props.match.params.reviewRound.

However, the path set in the Route is somehow problematic since when navigated to the url student/upload-submission?submissionId=1, the component does not load.

I am not sure how to address this issue. Any ideas?

Upvotes: 1

Views: 424

Answers (1)

Tameem Safi
Tameem Safi

Reputation: 728

You should just have one route for the component and then inside the component get the values from the query string. Then you can render what you need based on that.

Example

Route

<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)

Upvotes: 2

Related Questions