Компонент React не отображается на согласованном маршруте (response-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>

Только Маршрут с путем = "/" и Маршрут с путем = "/ пациент /: 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>

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

Что я делаю неправильно?


reactjs react-router-dom
person Emmanuel    schedule 26.05.2017    source источник
comment
Слабое предположение: попробуйте переупорядочить маршрут первого пациента, чтобы он находился под маршрутами с более сложными маршрутами.   -  person enapupe    schedule 26.05.2017

Ответы (2)


arrow_upward
3
arrow_downward

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

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

<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>
person Tharaka Wijebandara    schedule 26.05.2017
comment
Пожалуйста. Я обновил ответ, добавив более подробное объяснение. - person Tharaka Wijebandara; 26.05.2017
comment
Спасибо за ваше объяснение, мне еще многому нужно научиться - person Emmanuel; 26.05.2017

arrow_upward
1
arrow_downward

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

<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>
person Sagar    schedule 02.09.2018