^{<style id="pzb94"></style>}

react4怎么嵌套路由啊？我的二級(jí)路由沒(méi)有顯示，也不報(bào)錯(cuò)是怎么回事？

下面是首頁(yè)路由的配置

class RouterMap extends React.Component {
    render() {
        return (<BrowserRouter><div>
            <Switch>
            <Route path='/' exact component={Home}/>
             <Route path="/users" component={Users}/>
            <Route path='/city' component={City}/>
            <Route path='/city2' component={City2}/>
            <Route path='/result' component={Result}/>
            <Route match='match' path='/dashboard' exact component={Dashboard}/>
            <Route path='/dashboard/id'  component={Dashboard200}/>
            </Switch>
        </div></BrowserRouter>)
    }
}

下面是子路由頁(yè)面的配置

class Dashboard extends React.Component {
    componentDidMount(){
        //console.log(this.props)
    }
    render() {
        console.log(this.props)
        const match=this.props.match
        return (<div>
            <div>123</div>
            <Switch>
                <Route path={`${match.url}/2`} component={Dashboard6}/>
                <Route path={`${match.url}/3`} component={Dashboard1}/>
                <Route path="/2" component={Dashboard1}/>
            </Switch>
         </div>)
    }
}

回答

編輯回答

神曲

可以用react-router-config，下載模塊化引入
import { renderRoutes } from 'react-router-config'

const routes = [
  { component: App,
    routes: [
 
      { path: '/payAuthorization',
        exact: true,
        component: PayAuthorization,
        onEnter: () => {bridge.doAction('setTitle', { title: '授權(quán)簽約' });}
         routes: [
         { path: '/successMsg',
          component: SuccessMsg
        } 
        ]
      }
    ]
  }
]
// ...
<Router basename={basename}>
     <div>{renderRoutes(routes)}</div>
   </Router>,

要注意組件里面添加 <div>{renderRoutes(routes)}</div>

2017年6月17日 11:16

編輯回答