Javascript 如何在不更改'；州'；？

我没有太多的反应经验，我有一个问题。我希望有一个具有导航栏的组件，并根据单击的内容呈现该组件-但导航栏停留的位置（因此另一个组件显示在导航栏下方）。我的代码就是这么做的，但我不明白为什么。有人能解释一下为什么在我的代码中，当我点击例如“first”时，搜索组件仍然显示，并且在它下面呈现我的第一个组件吗？为什么不只呈现第一页？非常感谢

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;

类应用程序扩展了React.Component{
渲染（）{
返回(
)
}
}
导出默认应用程序；

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;

类搜索扩展了React.Component{
渲染（）{
返回(

首先
第二

)
}
}
导出默认搜索；

将应用程序代码更改为

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;

类应用程序扩展了React.Component{
渲染（）{
返回(
)
}
}
导出默认应用程序；

当您位于应用程序的根目录时，这将呈现搜索组件。但是，当您单击第一个或第二个时，它将导航到相应的组件，搜索组件将不再显示

---

以前，即使您路由到

第一个

或

第二个

组件，您始终在应用程序组件中呈现搜索组件。这导致搜索组件始终显示。

将应用程序代码更改为

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;

类应用程序扩展了React.Component{
渲染（）{
返回(
)
}
}
导出默认应用程序；

当您位于应用程序的根目录时，这将呈现搜索组件。但是，当您单击第一个或第二个时，它将导航到相应的组件，搜索组件将不再显示

---

以前，即使您路由到

第一个

或

第二个

组件，您始终在应用程序组件中呈现搜索组件。这导致搜索组件总是出现。

您的

组件似乎没有被任何

组件包装。本质上，您告诉React它应该呈现

，而不管路由器匹配什么路由。因此，无论您的路由是否匹配

/first

、

/second

或任何其他路由，React仍将呈现

，因为它“匹配”所有路由。

您的

组件似乎没有被任何

组件包装。本质上，您告诉React它应该呈现

，而不管路由器匹配什么路由。因此，无论您的路由是否匹配

/first

、

/second

或任何其他路由，React仍将渲染

，因为它“匹配”所有路由。

如果要隐藏任何点，请确保

由

组件包装。如果要隐藏任何点，确保

被

组件包装。