我有一个标头,并且在我内部有Link组件可以浏览任何页面,并且该标头需要在所有路径上显示,我将Header组件放在switch方法内,因为我内部有组件。但标头组件是单独呈现的,其他组件则不呈现,而仅标头组件。
class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<Switch>
<Header/>
<Route path={'/'} exact={true} component={Main}/>
<Route path={'/cursos'} exact={true} component={Cursos}/>
<Route path={'/forum'} exact={true} component={Forum}/>
<Route path={'/login'} exact={true} component={Login}/>
</Switch>
</BrowserRouter>
<Footer/>
</div>
);
}
}
答案 0 :(得分:2)
尝试这样的事情:
class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<React.Fragment>
<Header/>
<Switch>
<Route path={'/'} exact={true} component={Main}/>
<Route path={'/cursos'} exact={true} component={Cursos}/>
<Route path={'/forum'} exact={true} component={Forum}/>
<Route path={'/login'} exact={true} component={Login}/>
</Switch>
</React.Fragment>
</BrowserRouter>
<Footer/>
</div>
);
}
}
Switch
旨在仅渲染一个孩子(第一个匹配的孩子)。