我对做出react并尝试创建具有 2 种设计的应用程序相对较新。一种是具有公共页眉和页脚的公共站点以及具有管理页眉和侧边栏的内部应用程序。我创建了一个路由器和 2 个主要路由“/”和“/app”。然后我添加了子路由，希望如果父路由器匹配，它会显示父组件并将子路由的组件作为 this.props.children 传递。我好像做错了。这是我创建的。

应用程序.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>

    )
  }
...

主页.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>

    )
  }
}
...

谢谢，如果有人能告诉我或给我指出一个好的资源，我将不胜感激！