Компонент React не отображается на согласованном маршруте (react-router-dom)

Привет всем, я не знаю, что происходит. У меня есть следующие маршруты: 

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

Работают толькомаршрут с path="/" имаршрут с path="/patient/:id", остальные 3 маршрута просто не показывают компонент, соответствующий пути.

Вот как я получаю доступ к маршруту. У меня есть компонент заголовка с соответствующими ссылками на нем. Смотрите ниже 

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

В компоненте заголовка I импорт { Link } из 'react-router-dom'; и в файл, в котором я заявляю, маршруты я импорт { BrowserRouter, маршрутизации, коммутации } от 'реагировать-маршрутизатор-дом';

Что я делаю не так?

2 4
reactjs react-router-dom

2 ответа:

Проблема здесь в том, что вы не используете exact опора для ваших родительских маршрутов. По умолчанию маршрут не соответствует точно. В качестве примера для пути /, как /, так и /patient рассматриваются как совпадения. Так что даже в вашем случае /patient/:id/ маршрут совпадает со всеми другими маршрутами пути, который начинается с /patient/:id/. Поскольку Switch отображает только первое совпадение, он всегда отображает PatientWrapper даже для других путей, таких как /patient/:id/patient_profile/admission_form.

Используя exact prop следующим образом, Вы можете явно указать маршрут к точно соответствовать.

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

Убедитесь, что при рендеринге вы обертываете маршруты: 

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