React-router4怎么嵌套路由啊?我的二级路由没有显示,也不报错是怎么回事?

#1

下面是首页路由的配置

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

下面是子路由页面的配置
    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>)
    }
}
#2

你把

<Route match='match' path='/dashboard' exact component={Dashboard}/>

中的exact去掉就可以了

4 Likes
#3

你好~请问你怎么解决的

#4

#5

使用嵌套路由在父级不能用exact, 因为当你匹配路由时路径加了子路由,导致父级路由路径不匹配从而父子组件都显示不了。例如你这个/user/details 使用了exact,当路径变为/user/details/msg是匹配不到/user/details的,这样的话就无法渲染Details而msg又是在Detail里面所以也不会渲染

1 Like
#7

多谢解惑,感谢感谢