React学习18（路由嵌套）

注意事项

1）注册子路由的时候要写上父路由的path值

2）路由的匹配时按照注册路由的顺序来执行的

3）以下代码主要是Home组件进行路由的嵌套

代码示例

App.jsx

import React, { Component } from 'react'
import { Route, Switch, Redirect} from 'react-router-dom'
import Home from './pages/Home' //Home是路由组件
import About from './pages/About' // About是路由组件
import Header from './components/Header' // Header是一般组件
import MyNavLink from './components/MyNavLink'

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 在原生html中，靠a标签实现页面的跳转 */}
              {/* <a className="list-group-item active" href="./about.html">About</a>
              <a className="list-group-item" href="./home.html">Home</a> */}

              {/* 在React中靠路由链接切换组件 */}
              <MyNavLink to="/about" title="About" >About</MyNavLink>
              <MyNavLink to="/home" title="Home" >Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
              {/* 注册路由 */}
              <Switch>
                <Route  path= "/about" component={About}/>
                <Route  path="/home" component={Home}/>
                {/* 重定向，在刚进入页面的时候显示的页面 */}
                <Redirect to="/about"/> 
              </Switch>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Home.jsx

import React, { Component } from 'react'
import { Route, Switch ,Redirect} from 'react-router'
import MyNavLink from '../../components/MyNavLink'
import News from '../Home/News'
import Message from '../Home/Message'


export default class Home extends Component {
  render() {
    return (
      <div>
        <h2>我是Home的内容</h2>
        <div>
          <ul className="nav nav-tabs">
            <li>
              {/* <a className="list-group-item" href="./home-news.html">News</a> */}
              <MyNavLink to='/home/news'>News</MyNavLink>
            </li>
            <li>
              {/* <a className="list-group-item active" href="./home-message.html">Message</a> */}
              <MyNavLink to='/home/message'>Message</MyNavLink>
            </li>
          </ul>
          {/* 注册路由 */}
          <Switch>
            <Route to= '/home/news' component={News}/>
            <Route to="/home/message" component={Message}/>
            <Redirect to='/home/news'/>
          </Switch>
        </div>
    </div>
    )
  }
}

Home-Message.jsx

import React, { Component } from 'react'

export default class Message extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <a href="/message1">message001</a>&nbsp;&nbsp;
          </li>
          <li>
            <a href="/message2">message002</a>&nbsp;&nbsp;
          </li>
          <li>
            <a href="/message/3">message003</a>&nbsp;&nbsp;
          </li>
        </ul>
      </div>  
    )
  }
}

Home-News.jsx

import React, { Component } from 'react'

export default class News extends Component {
  render() {
    return (
      <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
      </ul>
    )
  }
}