react嵌套路由

149 阅读1分钟
                <Route path="/login" component={Login}></Route>
                <Route path="/admin" render={()=>
                  <Admin>
                      <Route path="/admin/ui/buttons" component={Buttons}></Route>
                      <Route path="/admin/ui/modals" component={Modals}></Route>
                      <Route path="/admin/ui/loadings" component={Loading}></Route>
                      <Route path="/admin/ui/notification" component={Notice}></Route>
                      <Route path="/admin/ui/messages" component={Message}></Route>
                      <Route path="/admin/ui/tabs" component={Tab}></Route>
                      <Route path="/admin/ui/gallery" component={Gallery}></Route>
                      <Route path="/admin/ui/carousel" component={Carouse}></Route>
                      <Route path="/admin/form/login" component={FormLogin}></Route>
                      <Route path="/admin/form/reg" component={FormRegiest}></Route>
                      <Route path="/admin/table/basic" component={BasicTable}></Route>
                      <Route path="/admin/table/high" component={HighTable}></Route>
                      <Route path="/admin/city" component={City}></Route>
                      <Route path="/admin/order" component={Order}></Route>
                      <Route path="/admin/user" component={User}></Route>
                  </Admin>
                }></Route>
               <Route path="/common" render={()=>{
                  return <Common>
                       <Route path="/common/order/detail/:orderId" component={OrderDetail}></Route>
                   </Common>
               }}></Route>
            </App>
        </BrowserRouter>

APP的内容
export default class App extends React.Component{
    render(){
  return(
  <div>
    {this.props.children}
  </div>
    )
  }
 }
 
 admin组件内容
 
     <div>
              <Row className="container">
                <Col span="4" className="nav-left">
                    <Navleft></Navleft>
                </Col>
                <Col span="20" className="main">

                    <Header>

                    </Header>
                    <Row className="content">
                         {/* <Home></Home> */}
                         {this.props.children}
                    </Row>
                    <Footer></Footer>
                </Col>
            </Row>
        </div>