ねえ、私は何が起こっているのかわからない。私は次のルートを持っています:

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

ヘッダーコンポーネントで、'react-router-dom'から{Link}をインポートします。そして、私がインポートするルートを宣言するファイルで、'react-router-dom'から{BrowserRouter、Route、Switch}をインポートします。

私は何が間違っているのですか?

応答

ここでの問題はexact、親ルートにpropを使用していないことです。デフォルトでは、Routeは完全一致を行いません。パスの例として、/との両方が一致//patient見なされます。したがって、あなたの場合でも、/patient/:id/Routeは。から始まる他のすべてのルートパスと一致します/patient/:id/Switchは最初の一致のみをレンダリングするため、のような他のパスに対しても常にPatientWrapperをレンダリングします/patient/:id/patient_profile/admission_form

次のようにpropを使用exactすると、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>

ルートをレンダリングするときは、必ずルートをラップしてください。

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