react.js从入门到精通(六)——路由的使用

react.js从入门到精通(六)——路由的使用

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/>
      <div className="zmz-react-section">
      <Route exact path="/" component={Home} />
      <Route  path="/Demo" component={Demo} />
      <Route  path="/Demo2" component={Demo2} />
      <Route  path="/Demo4" component={Demo4} />
      </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-header__box">
          <div className="zmz-react-header__left">
            <a href="#/bug"><img src={logo} className="zmz-react-logo" alt=""/></a>
          </div>
          <div className="zmz-react-header__right">
            <button className="zmz-react-button"><span>=</span></button>
            <div className="zmz-react-nav">
              <ul className="zmz-nav__demo">
                <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是我们的公共头部入下图

image.png

(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"
            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方式下载项目结构。


追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容