'状態'を変更せずにクリックプラスでコンポーネントをレンダリングする方法は？

Question

私は反応があまりなく、質問があります。私は、ナビゲーションバーを持ち、クリックされたものに基づいてコンポーネントがレンダリングされるようにしたかったのですが、どこにナビバーが残っているのですか（他のコンポーネントがナビバーの下に表示されています）。私のコードはそれだけですが、私は理由を理解していません。誰かが、なぜ私のコードで「最初」をクリックしたときに検索コンポーネントが表示され、その下に最初のコンポーネントがレンダリングされるのかを説明できますか？最初のページだけがレンダリングされるのはなぜですか？どうもありがとう！！あなたのアプリケーションのルートにあるとき

class App extends React.Component { 
       render() { 
        return(
         <div> 
          <Switch>      
           <Route path='/first' component={BudgetSearch}/> 
           <Route path='/second' component={CheapestFareForDestination}/> 
          </Switch> 
        <Search /> 
         </div> 
        ) 
       } 
     } 

export default App; 

Search.jsx

class Search extends React.Component { 
      render() { 

       return (
        <div> 

         <ul> 
          <li><Link to='/first'>first</Link></li> 
          <li><Link to='/second'>second</Link></li>       
         </ul> 
        </div> 
       ) 
      } 
     } 

export default Search; 

Answer 1

<Search />コンポーネントは、<Route />コンポーネントでラップされていないようです。本質的には、Reactに、どのルートがルータと一致するかにかかわらず、<Search />を表示するように指示しています。したがって、ルートが/first、/secondまたは他のルートと一致するかどうかに関わらず、Reactはすべてのルートに「一致」するため、<Search />をレンダリングします。

Answer 2

変更は

class App extends React.Component { 
       render() { 
        return(
         <div> 
          <Switch> 
           <Route path='/' component={Search}/>      
           <Route path='/first' component={BudgetSearch}/> 
           <Route path='/second' component={CheapestFareForDestination}/> 
          </Switch> 

         </div> 
        ) 
       } 
     } 

export default App; 

これにアプリのコードは、検索コンポーネントをレンダリングします。しかし、firstまたはsecondをクリックすると、適切なコンポーネントに移動し、検索コンポーネントは表示されなくなります。

以前は、firstまたはsecondコンポーネントにルーティングしていたにもかかわらず、検索コンポーネントは常にAppコンポーネント内にレンダリングされていました。これにより、検索コンポーネントが常に表示されました。