鍍金池/ 問答/HTML5  HTML/ react-router 4的多層嵌套路由 子路由不實現(xiàn)

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

一開始想實現(xiàn)一個路由嵌套，在主路由上（App）沒有問題，可以實現(xiàn)；
之后在子路由上想做一個路由嵌套，<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>的時候 總會調(diào)到一個新的路由里面 不知道為什么<Route />沒有渲染；

希望各位前輩指點一下 謝謝你們；

回答
編輯回答
傻丟丟

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

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 的時候
<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} />
這兩個組件是平行的關(guān)系 為什么路由設(shè)置成嵌套了呢 有點奇怪啊
類似這樣試試

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