React第三方组件1(路由管理之Router的使用④按需加载-上)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22

2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23

3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24

4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25

5、React第三方组件1(路由管理之Router的使用⑤按需加载-下)---2018.01.26

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

既然我们都用上了路由了，那么之前demo1，demo2等页面就不需要了！

我们把他们删除，然后统一合并到demo页面中！

修改 config -> entry -> entry.js

let entry = [
    {
        name: 'index',
        path: 'index/Index.jsx',
        title: '首页',
        keywords: '首页,xxx',
        description: '这是我们的首页'
    },
    {
        name: 'shop',
        path: 'shop/Index.jsx',
        title: '商城',
        keywords: '商城,xxx',
        description: '这是我们的商城'
    },
    {
        name: 'demo',
        path: 'demo/Index.jsx',
        title: '演示',
        keywords: '演示,xxx',
        description: '这是我们的演示'
    }
];
module.exports = entry;

demo文件夹中，新建Index.jsx

我们再来改造下整个工程，让他更符合多页面应用！

新建 Header.jsx

import React from 'react';
import '../../public/css/common.pcss'

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.pathname = window.location.pathname
    }

    handleNavClassName(name,index) {
        if (this.pathname.indexOf(name + '.html') !== -1) {
            return "selected"
        } else {
            return null
        }
    }

    componentDidMount() {

    }

    render() {
        return (
            <div className="header">
                <i className="ico-header-logo"/>
                <div className="nav">
                    <a href="/index.html" className={this.handleNavClassName('index',1)}>首页</a>
                    <a href="/shop.html" className={this.handleNavClassName('shop')}>商城</a>
                    <a href="/demo.html" className={this.handleNavClassName('demo')}>demo演示</a>
                </div>
            </div>
        );
    }
}

export default Header;

这里多了个 common.pcss 样式文件

i{
  display: inline-block;
  background-size: contain;
}
#app {
  > .header {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    .ico-header-logo {
      width: 100px;
      height: 100px;
      background-image: url("../img/ico-header-logo.png");
    }
    .nav {
      a{
        margin-right: 10px;
        color: blue;
        &.selected{
          color: #f00000;
        }
      }
    }
  }
  > .footer {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    .ico-footer-logo {
      width: 240px;
      height: 130px;
      background-image: url("../img/ico-footer-logo.png");
    }
  }
}

这里面有两张图片，你们自己选取两张，放到 img 文件夹中

新建Footer.jsx

import React from 'react';

class Footer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {

    }

    render() {
        return (
            <div className="footer">
                <i className="ico-footer-logo"/>
            </div>
        );
    }
}

export default Footer;

然后再修改 entryBuild.js文件

const entryContent = (data) => {
    return(
`import React from 'react';
import ReactDOM from 'react-dom';
import Index from '../app/component/${data.path}';
import Header from '../app/component/common/Header';
import Footer from '../app/component/common/Footer';
ReactDOM.render([<Header key="Header"/>,<Index key="Index"/>,<Footer key="Footer"/>],document.getElementById('app'));`
    )
};

然后执行

npm run devNew

这里只有三个入口文件了

然后修改下 index 下的 Index.jsx文件

import React from 'react';
import Seconds from '../common/Seconds'
import '../../public/css/index.pcss'

const Index = () => <Seconds title="首页"/>;

export default Index;

修改 common 下的 Seconds.jsx

render() {
    let state = this.state;
    return (
        <div className="cont">
            <SecondsTop {...this.props} />
            {/*这里我写了三中传值方法*/}
            <SecondsBottom {...state}/>
        </div>
    );
}

修改 common 下的 SecondsTop.jsx

import React from 'react';

const SecondsTop = ({title}) =>
    <div className="top">
        这是{title}
    </div>
;
export default SecondsTop;

然后执行

npm run dev

不出意外！浏览器效果应该是这样的！

我们把demo1，demo2两个页面内容用路由方式放到 demo演示页面中。

修改 demo 下的 Index.jsx

import React from 'react';
import {HashRouter, Route, NavLink,Redirect} from 'react-router-dom'
import Dome1 from '../demo/demo1/Index'
import Dome2 from '../demo/demo2/Index'
import '../../public/css/demo.pcss'
const Index = () =>
    <HashRouter>
        <div className="content">
            <div className="nav">
                <NavLink to="/Dome1" activeClassName="selected" exact>demo1</NavLink>
                <NavLink to="/Dome2" activeClassName="selected">demo2</NavLink>
            </div>
            <Route exact path="/"
                   render={() => (<Redirect to="/Dome1"/>)}/>
            <Route path="/Dome1" component={Dome1}/>
            <Route path="/Dome2" component={Dome2}/>
        </div>
    </HashRouter>
;

export default Index;

内面多了个样式 demo.pcss

加个样式

.content{
  height: 500px;
  .nav{
    a{
      color: blue;
      margin-right: 10px;
      &.selected{
        color: #f00000;
      }
    }
  }
}

ok,我们看下浏览器效果