react-router 4的多層嵌套路由子路由不實(shí)現(xiàn)

一開(kāi)始想實(shí)現(xiàn)一個(gè)路由嵌套，在主路由上（App）沒(méi)有問(wèn)題，可以實(shí)現(xiàn)；
之后在子路由上想做一個(gè)路由嵌套，<Route />卻沒(méi)有顯示；


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;

點(diǎn)擊<li>的時(shí)候總會(huì)調(diào)到一個(gè)新的路由里面不知道為什么<Route />沒(méi)有渲染；

希望各位前輩指點(diǎn)一下謝謝你們；

回答

編輯回答

傻丟丟

<Route strict exact path="/user/details" component={Details} />
把其中的exact去掉試試。
我遇到類(lèi)似的問(wèn)題，就是這么解決的。

2018年7月8日 00:09

編輯回答

萌小萌

switch是單一的建議把Route放在一起其他地方用Link或者this.props.history.push()跳轉(zhuǎn) Route加上exact 表示完全匹配

2018年4月5日 20:38

編輯回答

情殺

跳轉(zhuǎn)到 /user/details/msg 的時(shí)候
<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} />
這兩個(gè)組件是平行的關(guān)系為什么路由設(shè)置成嵌套了呢有點(diǎn)奇怪啊
類(lèi)似這樣試試

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

2018年2月5日 09:30