web端三大框架react、vue和angular,本篇教程介绍react的从入门到精通。
在pc端页面之间的切换,我们要使用a标签来实现
在react.js开发中,我们采用组件化操作,一个页面就是一个组件。所以页面和页面之间的跳转就相当于是组件和组件之间的跳转。
我们知道react.js是一种单页面项目开发,就是在一个主页面的基础上存放各种子页面。这就好像一根网线连接路由器,而路由器能分出很多根网线连接大量的电脑。所以我们将单页面项目的页面跳转称为路由。
在第一篇放出的框架中,我们介绍过专门用来管理路由的文件——routes.js文件。
(1)routers.js中的配置
import React from 'react';
import {BrowserRouter as Router , Route} from 'react-router-dom';
import Demo from '../views/demo1'
import Demo2 from '../views/demo2'
import Demo4 from '../views/demo4'
import Header from '../views/public/Header'
import Home from '../views/home';
export default (
<Router>
<Header></Header>
<div className="zmz-react-section">
<Route exact path="/" component={Home} ></Route>
<Route path="/Demo" component={Demo} ></Route>
<Route path="/Demo2" component={Demo2} ></Route>
<Route path="/Demo4" component={Demo4} ></Route>
</div>
</Router>
);
注意:这里需要使用react-router功能模块,一般都是框架中自带的,如果没有可使用npm进行下载使用。
(2)header.js中的代码
import React, { Component } from 'react';
import logo from '../../logo.svg';
import {NavLink} from 'react-router-dom';
class Header extends Component {
render() {
return (
<div className="zmz-react-header">
<div className="zmz-react-headerbox">
<a href="#/bug"><img src={logo} className="zmz-react-logo" alt=""/></a>
</div>
<div className="zmz-react-headerright">
<button className="zmz-react-button"><span>=</span></button>
<div className="zmz-react-nav">
<li className="nav-item"><NavLink exact to='/' className="blue">变量的定义和初始化</NavLink></li>
<li className="nav-item"><NavLink to='/Demo' className="blue">事件的定义和使用</NavLink></li>
<li className="nav-item"><NavLink to='/Demo2' className="blue">组件使用的场景</NavLink></li>
<li className="nav-item"><NavLink to='/Demo4' className="blue">组件的数据传递</NavLink></li>
</ul>
</div>
</div>
</div>
</div>
);
}
}
export default Header;
header是我们的公共头部入下图
(3)home.js中的代码:
import React, {Component} from 'react';
import logo from '../logo.svg';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
data:"构造函数:react是优秀的前端三大框架之一"
};
}
render(){
let datatwo = "render:react是优秀的前端三大框架之一"
return (
<div className="zmz-react">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
我的第一个demo从react初始化开发
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
准备起步
</a>
<span>{this.state.data}</span>
<span>{datatwo}</span>
</header>
</div>
);
}
}
export default Home;
这一种相对于Link方法更加常用。
Home.js代码
import React, {Component} from 'react';
import logo from '../logo.svg';
import {NavLink} from 'react-router-dom';
import PropTypes from 'prop-types'
class Home extends Component {
constructor(props) {
super(props);
this.state = {
data:"构造函数:react是优秀的前端三大框架之一"
};
}
render(){
console.log(React)
let datatwo = "render:react是优秀的前端三大框架之一"
return (
<div className="zmz-react">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
我的第一个demo从react初始化开发
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
准备起步
</a>
<span>{this.state.data}</span>
<span>{datatwo}</span>
<span onClick={()=>this.click()}>点击跳转到demo4</span>
</header>
</div>
);
}
click=()=>{
this.props.history.push("/demo4");
};
}
export default Home;
点击通过
this.props.history.push("/demo4");
方式进行页面跳转
如果你对上面的一无所知的话可以访问追梦猪git下载demo实现快捷开发,省掉安装的步骤
追梦猪react项目demo实例(https://github.com/jiawenguang/React-demo.git)
可以通过git clone方式下载项目结构。
本文地址:https://www.zhuimengzhu.com/details/223.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。