すべてのページに対応するルータロードルート

Question

<HashRouter> 
     <div> 
      <Route path={"/"} component={Home} /> 
      <Route path={"/component"} component={AnotherComp} /> 
      <Route path={"*"} component={NotFound} /> 
     </div> 
     </HashRouter> 

基本的に私はこのコードを持っています。私が望むのは、ちょうど/に行くとホームページをレンダリングしますが、パスを追加するとそのページに行くということです。しかし、私は2つの問題があります。まず何らかの理由で、ホームページはすべてのページに表示されますが、パスページのコンテンツも表示されます。だから/私に家を与える（これは正しい）。 /componentは、AnotherCompコンポーネントとホームページをレンダリングします。私はそれが単一のコンポーネントをレンダリングしたいだけです。別の問題は、私の*ルートもすべてのページでレンダリングされていることです。 ホームをレンダリングするにはどうすれば/になりますか？*は、パスがわからないときにのみレンダリングされますか？

Answer 1

exactを経路に追加してみてください。

<Route exact path={"/"} component={Home} /> 

未知のURLにヒットしたルートが必要な場合は、switch文を使用できます。

<HashRouter> 
    <div> 
     <Switch> 
      <Route exact path={"/"} component={Home} /> 
      <Route exact path={"/component"} component={AnotherComp} /> 
      <Route path={"*"} component={NotFound} /> 
     </Switch> 
    </div> 
</HashRouter>