React learning 18 (routing nesting)

Precautions

1) When registering a child route, write the path value of the parent route

2) Route matching is performed in the order of registered routes

3) The following code is mainly the nesting of the Home component for routing

code example

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