React Component not showing on matched Route (react-router-dom)

Question

Hey everyone I dont know whats going on. I have the following routes:

<BrowserRouter>
  <div>
    <Switch>
      <Route path="/patient/:id/" component={PatientWrapper} />
      <Route path="/patient/:id/patient_profile/admission_form" component={PatientAdmission} />
      <Route path="/patient/:id/patient_profile/discharge_form" component={PatientDischarge} />
      <Route path="/patient/:id/patient_profile/encounter_details" component={PatientEncounterDetails} />
      <Route path="/" component={App} />
    </Switch>
  </div>
</BrowserRouter>

Only Route with path="/" and Route with path="/patient/:id" are the ones working, the other 3 routes are just not showing the component that corresponds to the path.

This is how I access to the Route. I have a Header Component with the proper links on it. See below

<ul className="dropdown-menu dropdown-messages">
    <li><Link to={"/patient/" + this.props.id +"/patient_profile/admission_form"} id="admission-link" >Admission</Link></li>
     <li><Link to={"/patient/" + this.props.id +"/patient_profile/discharge_form"} id="discharge-link">Discharge</Link></li>
     <li className="divider"></li>
     <li><Link to={"/patient/" + this.props.id +"/patient_profile/encounter_details"} id="encounter-details">Encounter Details</Link></li>
</ul>

In the Header component I import { Link } from 'react-router-dom'; and in the file where I declare the routes I import { BrowserRouter, Route, Switch } from 'react-router-dom';

What am I doing wrong?

Answer 1

The problem here is you are not using exact prop for your parent routes. By default, Route doesn't do an exact match. As an example for path / , both / and /patient are considered as matches. So even in your case, /patient/:id/ Route matches for all other routes path which starts from /patient/:id/ . Since Switch only renders the first match, it always renders PatientWrapper even for other paths like /patient/:id/patient_profile/admission_form .

Using exact prop as follows you can explicitly instruct Route to match exactly.

<BrowserRouter>
  <div>
    <Switch>
      <Route exact path="/" component={App} />
      <Route path="/patient/:id/" exact component={PatientWrapper} />
      <Route path="/patient/:id/patient_profile/admission_form" component={PatientAdmission} />
      <Route path="/patient/:id/patient_profile/discharge_form" component={PatientDischarge} />
      <Route path="/patient/:id/patient_profile/encounter_details" component={PatientEncounterDetails} />
    </Switch>
  </div>
</BrowserRouter>

Answer 2

Make sure you wrap routes in when you render them:

<BrowserRouter>
    <Switch>
       <Route path="/patient/:id/" component={PatientWrapper} />
      <Route path="/patient/:id/patient_profile/admission_form" component={PatientAdmission} />
      <Route path="/patient/:id/patient_profile/discharge_form" component={PatientDischarge} />
      <Route path="/patient/:id/patient_profile/encounter_details" component={PatientEncounterDetails} />
      <Route path="/" component={App} />
    </Switch>
</BrowserRouter>