javascript - 如何在不更改 'state' 的情况下渲染点击加组件？

Question

我对 React 不太有经验，我有一个问题。我想要一个具有导航栏的组件，并根据单击的内容呈现该组件 - 但导航栏所在的位置(因此另一个组件显示在导航栏下方)。我的代码就是这样做的，但我不明白为什么。有人可以解释为什么在我的代码中，当我单击“第一个”时，搜索组件仍然显示，并且在它下面呈现我的第一个组件？为什么不只渲染第一页？非常感谢!!

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;

搜索.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 />因为它“匹配”所有路线。