路由的嵌套

123 阅读1分钟

以下代码均在react中执行

 <Router>
        <div className="nav">
            <ul>
                <li><Link to='/'>首页</Link>|</li>
                <li><Link to='/about?a'>关于我们</Link>|</li> 
                <li><Link to='/course/css'>课程介绍</Link>|</li> 
                <li><Link to='/course/js'>课程介绍2</Link>|</li> 
                <li><Link to='/telme'>联系我们</Link></li>
            </ul>
            <hr/>
            <Route exact path='/' component={Home}/>
            <Route path='/about?a=1' component={About}/>
            <Route path='/course/:names' component={Course}/>
            <Route path='/telme' component={Telme}/>
        </div>
    </Router>
const Telme=({match})=>(
    <Router>
    <div>
        <ul>
            <li><Link to={match.url+"/w"}>联系微信</Link></li>
            <li><Link to={match.url+"/q"}>联系QQ</Link></li>
        </ul>
        <hr/>
        <Route exact path={match.url+"/w"} component={Home}/>
        <Route path={match.url+"/q"} component={About}/>
    </div>
</Router>
)