Reputation: 8311
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
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.
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