我对反应和尝试创建一个具有两种设计的应用程序相对较新。一种是具有公共页眉和页脚的公共网站,以及具有管理页眉和侧栏的内部应用程序。我创建了一个路由器和 2 个主路由“/”和“/app”。然后我添加了子路由,希望如果父路由器匹配,它将显示父组件并将子路由的组件作为 this.props.children 传递。我好像做错了。这是我创建的。
App.js:
...
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route component={Public}>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
</Route>
<Route component={Main}>
<Route path="/dash" component={Dash}/>
<Route path="/people" component={People}/>
</Route>
</Switch>
</Router>
);
}
}
...
公共“模板”:
...
render(){
return(
<div>
I am a public page
{this.props.children}
</div>
)
}
...
Home.js
...
class Home extends Component{
render(){
return(
<div>I am the home page</div>
)
}
}
...
应用程序“模板”
...
class Main extends Component{
render(){
return(
<div>
<Header />
<div>I am an app page</div>
{this.props.children}
<Footer/>
</div>
)
}
}
...
Dash.js
...
class Dash extends Component{
render(){
return(
<div>I am the dash page</div>
)
}
}
...
谢谢,如果有人能告诉我或给我指出一个好的资源,我将不胜感激!
你真的很接近!您需要做的实际上是将模板组件作为父组件而不是放在<Route />
成分。子组件是位于其开始标签和结束标签之间的组件。继续卡车运输!
class App extends Component {
render() {
return (
<Router>
<Switch>
<Public>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
</Public >
<Main>
<Route path="/dash" component={Dash}/>
<Route path="/people" component={People}/>
</Main>
</Switch>
</Router>
);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)