接着上节课的内容React从入门到架构（6）–基于Antd项目，熟悉React的生命周期

我们对App.js进行一些改造，先不管具体的意义，先上代码：

import React, { Component } from 'react';
//CSS层叠样式表引入
import './style/App.css';
import { Layout } from 'antd';
import {BrowserRouter as Router, Route, HashRouter, Switch } from 'react-router-dom';
//子组件引入

import HeaderPage from './HeaderPage';
import SiderPage from './SiderPage';
import ContentPage from './component/ContentPage';

class thisLayout extends Component {
  render() {
    return (
      <div className="App">
        <Layout>
          <HeaderPage />
          <Layout>
            <SiderPage />
            <Switch>
                <Route path="/app/index" component={ContentPage} />
            </Switch>
          </Layout>
      </Layout>
      </div>
    )
  }
};

class App extends Component {

  handleClose = () => {
    console.log("this is callback")
  }
  
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/app" component={thisLayout} />
        </Switch>
      </Router>
    );
  }
}

export default App;

• 然后我们访问http://localhost:3000，将会看到一个空白页面；

• 我们访问http://localhost:3000/app，将会看到如下界面：
  

• 我们访问http://localhost:3000/app/index，将会看到如下界面：
  

下面我们来解读一下这段代码：
<Switch><Route path="/app" component={thisLayout} /></Switch>
在Switch中，我们增加了一个路由，对应的地址是/app，所以，http://localhost:3000只会加载空页面，因为没有分配对应的组件；
而http://localhost:3000/app就会加载thisLayout这个组件；
在thisLayout组件中：
<Switch><Route path="/app/index" component={ContentPage} /></Switch>
http://localhost:3000/app只会加载Header、Sider这些组件；
只有http://localhost:3000/app/index会加载ContentPage这个组件。

接下来，我们进一步改造index.js、App.js，并增加Login、404NotFound界面。

具体代码如下：
index.js

import App from './App';
import NotFound from './NotFound';
import Login from './Login';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter as Router, Route, HashRouter, Switch } from 'react-router-dom';

class RootPage extends React.Component{
    render(){
        return(
            <Router>
                <Switch>
                    <Route path="/app" component={App} />
                    <Route path="/404" component={NotFound} />
                    <Route path="/login" component={Login} />
                </Switch>
            </Router>
        )
    }
} 

ReactDOM.render(<RootPage />, document.getElementById('root'));

这个比较符合我们之前的解读，也就是说：

[host:port]/app
[host:port]/Notfound
[host:port]/Login

这三个路由分别对应着加载不同的内容。
我们先不管App.jsx，先看看Notfound.js的内容：
NotFound.js

import React, { Component } from 'react'

export default class componentName extends Component {
  render() {
    return (
      <div>
        Not Found
      </div>
    )
  }
}

再看看页面：

login就不说了，大家随便写个啥试试就行。

然后是App.js，我们需要在里面增加第二层路由：
App.js

import React, { Component } from 'react';
//CSS层叠样式表引入
import './style/App.css';
import { Layout } from 'antd';
import {BrowserRouter as Router, Route, HashRouter, Switch } from 'react-router-dom';
//子组件引入

import HeaderPage from './HeaderPage';
import SiderPage from './SiderPage';
import ContentPage from './component/ContentPage';
import IndexPage from './component/IndexPage';
class App extends Component {

  render() {
    return (
      <div className="App">
        <Layout>
          <HeaderPage />
          <Layout>
            <SiderPage />
            <Switch>
                <Route path="/app/index" component={IndexPage} />
                <Route path="/app/books" component={ContentPage} />
            </Switch>
          </Layout>
      </Layout>
      </div>
    );
  }
}

export default App;

我们从代码中可以看到，App文件中，在加载了HeaderPage、SiderPage几个文件以后，还加载了一层路由，我们可以大胆猜测以下，这里是通过路由，来选择加载不同的组件。
我们看一下IndexPage.jsx的内容：

import React, { Component } from 'react';
import {Row, Col} from 'antd';

export default class componentName extends Component {
  render() {
    return (
      <Row>
        <Col xl={24}>
            <h1>欢迎光临图书管理系统</h1>
        </Col>
      </Row>
    )
  }
}

我们访问一下：

OK，这下子我们可以明白了
路由代表了加载的具体内容，我们可以通过路由，在一定的布局中，控制页面内容的加载。这一点在菜单栏的实践中，尤其好用。

接下来，我们将简单的实现一个图书管理系统。