使用主页/模板对路由器V4路由器进行反应-Java 学习之路

我是一个相对较新的反应和尝试创建一个有2个设计的应用程序 . 一个是具有公共页眉和页脚的公共站点，以及具有管理 Headers 和侧栏的内部应用程序 . 我创建了一个路由器和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>

    )
  }
}
...

谢谢，如果有人能告诉我或指出一个好资源我会很感激！

1 回答

你真的很亲密！您需要做的是将模板组件作为父组件放在 <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>
       );
     }
   }

回复于 2024-04-29T14:16:55+08:00

使用主页/模板对路由器V4路由器进行反应

1 回答

相关问题