React中路由跳转相关知识、手写轮播图

一、路由跳转

//下载
npm install react-router-dom@5
//引入{}中是经常会用到的组件 看情况引入自己所需要的
import { HashRouter, Route, Redirect, Switch, NavLink,Link } from "react-router-dom";

1）DOM跳转

1、在路由配置文件中配置路由组件

思路：
1、路由要由HashRouter包括 里面在嵌套switch包括为了切换其他页面刷新不返回
2、我使用了MainLayout组件封装一个底部导航跳转为了跳转其他页面没有底部导航出现
3、 显示底部导航的页面放在MainLayout组件中 也需要嵌套switch，其他页面放在上面
4、注意404页面 底下加个重定向
5、exact严格匹配模式的添加(我这段代码里面404路由、重定向使用了exact)

MainLayout组件我用的是NavLink跳转 别忘了this.props.children

2、在需要展示的区域进行展示

在Home页面中二级路由
注意：Home页面中的二级路由 找路径时就写在Home页面下path="/Home/xxx"

2）js跳转

使用this.props.history.push('')

二、跳转传参

在跳转的路径后面加id

在路由后面也需要加/:id

在详情页面使用this.props.match.params获取id（match.params获取额外信息）

四、轮播图

1、死数据

import React, { Component } from 'react'

export class Banner extends Component {
  constructor(props){
    super()
    this.state={
      // 找图片路径： / 相当于 public
      bannerList:['/img/a1.jpg','/img/a2.jpg','/img/c1.jpg'],//图片数组
      img:'/img/a1.jpg',
      index:0

    }
  }
  componentDidMount(){
    //调用自动轮播函数
    this.changeImg()
  }

  changeImg=()=>{//自动轮播函数
    //定时器
    setInterval(()=>{
        if(this.state.index<this.state.bannerList.length-1){
          this.setState({
            index:this.state.index+1
          })
        }else{
          this.setState({
            index:0
          })
        }

        this.setState({
          img:this.state.bannerList[this.state.index]
        })
    },2000)
  }
  render() {
    return (
      <div>
        {/* 手写轮播图  死数据*/}
        {/* 注意 图片、json数据要放在public里面 不要放在src中 */}
        <div className='bannerBox'>
          <img src={this.state.img} ></img>
        </div>
        
      </div>
    )
  }
}

export default Banner

2、请求接口数据

在api/index.js中先配置接口

import axios from '../utils/request' //引入axios拦截器


// 首页导航接口
export function bannerList(data){
    return axios({
        url:'http://vueshop.glbuys.com/api/home/index/slide?token=1ec949a15fb709370f',
        method:'get',
        data:data
    })
}

当前页面

import React, { Component } from 'react'
import {bannerList} from '../api/index'//引入轮播图接口
export class My extends Component {
  constructor(props){
    super()
    this.state={
      // 找图片路径： / 相当于 public
      bannerList:[],//定义空数组 存储获取的图片数据
      img:[],
      index:0,
      timer:null

    }
  }

  componentDidMount(){
    //接口请求 获取轮播图数据
    bannerList().then((res) => {
      console.log(res.data)

      this.setState({
        bannerList:res.data,
        img:res.data[0]
      })

    })

    // 调用自动轮播函数
    this.changeImg()
  }
  
  changeImg=()=>{//自动轮播函数
    //定时器
    setInterval(()=>{
        if(this.state.index<this.state.bannerList.length-1){
          this.setState({
            index:this.state.index+1
          })
        }else{
          this.setState({
            index:0
          })
        }

        this.setState({
          img:this.state.bannerList[this.state.index]
        })
    },2000)
  }

  render() {
    return (
      <div>
        {/* 手写轮播图 请求数据*/}
        <div className='bannerBox'>
          <img src={this.state.img.image} ></img>
        </div>
      </div>
    )
  }
}

export default My