React Router V4 路由器与母版页/模板 [英] React Router V4 Routers with Master Pages / Templates

问题描述

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

App.js:

<代码>...类 App 扩展组件 {使成为() {返回 (<路由器><开关><路由组件={公共}><路由精确路径="/" component={Home}/><Route path="/login" component={Login}/></路线><路由组件={Main}><Route path="/dash" component={Dash}/><Route path="/people" component={People}/></路线></开关></路由器>);}}...

公共模板":

<代码>...使成为(){返回(<div>我是公众号{this.props.children}

)}...

Home.js

<代码>...类 Home 扩展组件{使成为(){返回(<div>我是首页</div>)}}...

应用模板"

<代码>...类 Main 扩展组件{使成为(){返回(<div><标题/><div>我是一个应用页面</div>{this.props.children}<页脚/>

)}}...

Dash.js

<代码>...类 Dash 扩展组件{使成为(){返回(<div>我是破折号页面</div>)}}...

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

解决方案

你真的很接近！您需要做的实际上是将模板组件作为父组件而不是 <Route/> 组件.组件子组件是其开始和结束标记之间的组件.继续卡车运输！

class App 扩展组件 {使成为() {返回 (<路由器><开关><公开><路由精确路径="/" component={Home}/><Route path="/login" component={Login}/></公共 ><主要><Route path="/dash" component={Dash}/><Route path="/people" component={People}/></主要></开关></路由器>);}}

I am relatively new to react and attempting to create an app that has 2 designs. One is the public site that has a common header and footer and the internal app which has an admin header and side bar. I created a Router and 2 main routes '/' and '/app'. I then added subroutes hoping that if the parent routers were matched, it would show the parent component and pass the sub route's component as the this.props.children. I seemed to have done it wrong. Here is what I created.

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>
    );
  }
}
...

Public 'template':

...
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>
    )
  }
}
...

App 'template'

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

    )
  }
}
...

Thanks and if any one can tell me or point me to a good resource I would appreciate it!

解决方案

You're really close! What you need to do is actually put the template components as the parent not in a <Route /> component. A components children are the components in between its start and end tag. Keep on trucking !

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>
       );
     }
   }

这篇关于React Router V4 路由器与母版页/模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！