React開發中使用react-router-dom路由最新版本V5.1.2（三）路由嵌套子路由

在v4+中路由規則位於布局和 UI 本身之間，因為route本身也是一個組件，萬物皆組件，所以我們要嵌套路由直接在組件里寫就可以了

看代碼，新建一個list.jsx，然后再建兩個子組件mobile和pc

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from "react-router-dom";
import Mobile from './lists/Mobile';
import Pc from './lists/Pc';
import './home.css';
export default class List extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><NavLink to="/list/app" activeClassName="selected">手機端</NavLink></li>
            <li><NavLink to="/list/pc" activeClassName="selected">PC端</NavLink></li>
          </ul>
          <hr />
          <Switch>
            <Route strict path="/list/app" component={Mobile}/>
            <Route strict path="/list/pc" component={Pc}/>
            {/* <Route component={()=><div>子路由的404！</div>}/> */}
          </Switch>
        </div>
      </Router>
    );
  }
}

　mobile

import React from 'react';
export default class Mobile extends React.Component {
  render() {
    return (
      <div>
        進入手機端
      </div>
    )
  }
}

　　pc的代碼

import React from 'react';
export default class Pc extends React.Component {
  render() {
    return (
      <div>
        加入電腦pc模式
      </div>
    )
  }
}

　　看效果