本教程总共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,我们看下浏览器效果