react-router 4的多层嵌套路由 子路由不实现

Question

一开始想实现一个路由嵌套，在主路由上（App）没有问题，可以实现；
之后在子路由上想做一个路由嵌套，<Route />却没有显示；

const App = () => (     <Switch>
      <Route exact path="/" component={Index}/>
      <Route strict exact path="/user" component={User} />
      <Route strict exact path="/user/details" component={Details} />
     </Switch>
               )
export default App

class Details extends Component{   

    componentWillMount(){
        console.log('details')
      }

    render(){

        return (            <div>
                <ul>
                    <li><Link to="/user/details/msg">click msg</Link></li>
                    <li><Link to="/user/details/abt">cliock abt</Link></li>
                </ul>
                <Route path="/user/details/msg" component={Msg} />
                <Route path="/user/details/abt" component={Abt} />
            </div>
        )
    }
}

export default Details;

点击<li>的时候 总会调到一个新的路由里面 不知道为什么<Route />没有渲染；

希望各位前辈指点一下 谢谢你们；

Answer 1

switch是单一的 建议把Route放在一起 其他地方用Link或者this.props.history.push()跳转 Route加上exact 表示完全匹配