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?

A loose guess: try reordering the first patient route to underneath the ones with more complex paths — enapupe
– enapupe, Commented May 26, 2017 at 1:32

Tharaka Wijebandara · Accepted Answer · 2017-05-26 01:49:11Z

3

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>

edited May 26, 2017 at 1:49

answered May 26, 2017 at 1:33

Tharaka Wijebandara

8,0751 gold badge33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tharaka Wijebandara Over a year ago

You're welcome. I updated the answer with a better explanation.

Emmanuel Over a year ago

Thank you for your explanation, there is alot I still need to learn

Sagar · Accepted Answer · 2018-09-02 07:18:54Z

1

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>

answered Sep 2, 2018 at 7:18

Sagar

4,9773 gold badges35 silver badges41 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related