概述

web端三大框架react、vue和angular，本篇教程介绍react的从入门到精通。

九、对路由的理解

在pc端页面之间的切换，我们要使用a标签来实现

在react.js开发中，我们采用组件化操作，一个页面就是一个组件。所以页面和页面之间的跳转就相当于是组件和组件之间的跳转。

我们知道react.js是一种单页面项目开发，就是在一个主页面的基础上存放各种子页面。这就好像一根网线连接路由器，而路由器能分出很多根网线连接大量的电脑。所以我们将单页面项目的页面跳转称为路由。

在第一篇放出的框架中，我们介绍过专门用来管理路由的文件——routes.js文件。

1、使用NavLink进行路由跳转

（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;

2、使用push的方式进行路由跳转

这一种相对于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&quot;
                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方式下载项目结构。