React中的嵌套路由,5版本(二级或者多级路由)

  1. 注册子路由时要写上父路由的path值
  2. 路由的匹配时按照注册路由的顺序进行的
    例:
    在这里插入图片描述
    Home---->index.jsx
import React, {
    
     Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import {
    
    Route,Switch,Redirect} from 'react-router-dom'
import News from './News'
import Message from './Message'
export default class Home extends Component {
    
    
    render() {
    
    
        return (
            <div>
                <h3>我是Home的内容</h3>
                <div>
                    <ul className="nav nav-tabs">
                        <li>
                            <MyNavLink to='/home/news'>News</MyNavLink>
                        </li>
                        <li>
                            <MyNavLink to='/home/message'>Message</MyNavLink>
                        </li>
                    </ul>
                    {
    
    /* 注册路由 */}
                    <Switch>
                        <Route path='/home/news' component={
    
    News}/>
                        <Route path='/home/message' component={
    
    Message}/>
                        <Redirect to='/home/news'/>
                    </Switch>
                </div>
            </div>
            
        )
    }
}

猜你喜欢

转载自blog.csdn.net/weixin_48952990/article/details/126554086