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

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

Answer 2

<Route strict exact path="/user/details" component={Details} />
把其中的exact去掉试试。
我遇到类似的问题，就是这么解决的。

Answer 3

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

Answer 4

跳转到 /user/details/msg 的时候
<Route strict exact path="/user/details" component={Details} />
不能匹配Details了 那Details里的子组件自然不能渲染了啊
<Route strict exact path="/user" component={User} />
<Route strict exact path="/user/details" component={Details} />
这两个组件是平行的关系 为什么路由设置成嵌套了呢 有点奇怪啊
类似这样试试

const Index=()=>(<div>index</div>);
    const User=()=>(<div>user</div>);
    const Msg=()=>(<div>msg</div>);
    const Abt=()=>(<div>abt</div>);
    const Details=()=>(
            <div>
                <ul>
                    <li><Link to="/details/msg">click msg</Link></li>
                    <li><Link to="/details/abt">cliock abt</Link></li>
                </ul>
                <Route path="/details/msg" component={Msg} />
                <Route path="/details/abt" component={Abt} />
            </div>
    )
    const App = () => (
        <HashRouter>
            <Switch>
                <Route exact path="/" component={Index}/>
                <Route strict exact path="/user" component={User} />
                <Route path="/details" component={Details} />
            </Switch>
        </HashRouter>
    )

Answer 5

可以用react-router-pro啊，像用vue一样使用router，https://github.com/aiyuekuang...