个人主页:个人主页

✌支持我 :点赞收藏关注

文章目录

  • ⛳React 路由
    • 路由简介
      • 1.什么是路由
      • 2.路由安装
    • 路由的使用
      • (1)路由方法导入
      • (2)定义路由
      • (3)路由重定向
      • (4)嵌套路由
      • (5)路由跳转方式
      • (6)路由传参
      • (7)路由拦截
      • (8)路由模式
        • HashRouter模式
        • BrowserRouter模式
        • 额外命名
      • (9)withRouter
    • 项目注意
        • 反向代理
        • CSSModule

⛳React 路由

路由简介

1.什么是路由

路由是根据不同的 url 地址显示不同的内容或页面
一个针对React而设计的路由解决方案,可以友好的帮助解决React components到URL之间的同步映射关系

2.路由安装

npm install react-router-dom@5

路由的使用

(1)路由方法导入

import React, { Component } from 'react'import {HashRouter,Route} from 'react-router-dom'

(2)定义路由

              1111  

(3)路由重定向

1. 会导航到一个新的位置,新的位置将覆盖历史堆栈中的当前条目,例如服务器端重定向
2. 当用户访问某界面时,若该界面并不存在,则需跳转到一个我们自定义的界面,此时需要用Redirect重定向

//引入redirectimport {HashRouter,Redirect,Route} from 'react-router-dom'..................................

1. from: string => 要从中进行重定向的路径名

2. to:string => 要重定向到的位置

以上为模糊匹配,凡是以/开头的都会跳转到films

解决

引入Switch组件

import {HashRouter,Redirect,Route,Switch} from 'react-router-dom'....................................                  1      {/* 模糊匹配 凡是以/开头的都会跳转到films*/}      

Switch如switch语句一样,若匹配到,则不在匹配;若均未匹配到,则跳转到自定义的界面films

注意:Redirect必须放在Switch里的最后一行,表示上面路由都匹配不到,则跳转到“/films”组件

精准匹配

//语法

加上 exact 表示精确匹配,只有完全是”/“时才会跳转到”/films”界面

............................................         1111   {/* 模糊匹配 凡是以/开头的都会跳转到films*/}      {/* 精确匹配 */}       

当输入的路径都不匹配时,则会跳转到 NotFound界面

(4)嵌套路由

//films组件中            

(5)路由跳转方式

  • 声明式导航

    import { NavLink } from 'react-router-dom'电影影院我的

    点击时将会跳转到对应的界面,activeClassName属性每次加到被点击的那个标签上,可以通过这个来添加样式

  • 编程式导航(注意HOOK使用 类组件不可以直接使用)

    • 第一种写法

      //被Route包裹时,组件中会获得形参propsthis.props.history.push(`/center`)
    • 第二种写法

      import {useHistory} from 'react-router-dom'......................................const history = useHistory()const handleChangePage=(id)=>{  history.push(`/detail/${id}`)}

(6)路由传参

  • 动态路由传参(推荐)

    //定义路由//传参 history.push(`/detail/${id}`)//获得参数props.match.params.myid

    其中 “:myid”为占位符(要传的参数),表示路由必须写成 =>/detail/111的格式

    页面刷新,参数不会丢失

  • query传参

    //定义路由//传参props.history.push({pathname:'/detail',query:{myid:id}})//获得参数console.log(props.location.query.myid,'利用id去后端拿数据');

    刷新地址栏,参数丢失

  • state传参

    //定义路由//传参history.push({pathname:'/detail',state:{myid:id}})//获得参数console.log(props.location.state.myid,'利用id去后端拿东西');

    使用HashRouter的话,刷新页面,参数会丢失

(7)路由拦截

拦截路由变化做自定义处理,尚未登录时点击观看纪录,则会跳转到登录界面

function isAuth(){    return localStorage.getItem("token")} ............................................{      return isAuth()?:}}>

判断token,若没有则重定向到“/login”界面

(8)路由模式

HashRouter模式

有 # 路径,不像后端发请求要页面

BrowserRouter模式

没有 # 的路径,真正向后端发请求要页面,后端没有对对应的路径处理路径,就会404

额外命名

import {BrowserRouter as Router,Redirect,Route,Switch} from 'react-router-dom'......................................

将BrowserRouter/HashRouter,重新命名为Router,方便切换

(9)withRouter

作用

将一个组件包裹在Route里面,然后react-router的三个对象history,location,match就会被放进这个组件的props属性中,此时这个组件就有了props,并具备了路由的属性

应用场景

  {            return isAuth()?:  }}>  //组件使用render函数直接渲染,此时组件的this.props为空,无法执行props中的history,location,match方法

在层级关系组件中,无法直接获得父组件的props(除传递props外)或 父组件就没有props,此时子组件就无法具备路由的属性

语法

import React, { Component } from 'react'import { withRouter } from 'react-router-dom'function Center(props){  return (          {        props.history.push(`/filmsorder`)      }}>            )}export default withRouter(Center)

项目注意

反向代理

前端解决跨域问题

  • 在src下创建 setupProxy.js文件

  • 安装

    npm i http-proxy-middleware
  • setupProxy.js文件中配置反向代理

    const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) {  // app.use(),这个可以配置多个代理  app.use(     //ajax是需要转发的请求(所有带有/ajax前缀的请求都会转发给 https://i.maoyan.com)    '/ajax',    createProxyMiddleware({      //配置转发目标地址(能返回数据的服务器地址)      target: 'https://i.maoyan.com',      changeOrigin: true,    })  );// https://i.maoyan.com/ajax/mostExpected?limit=10&offset=0&token=&optimus_uuid=C43ACD00C40211EDB6FB1DC502B2262A6C9A830AE637431CBD63E72665CE4A70&optimus_risk_level=71&optimus_code=10    

注意:每次编写完setupProxy.js文件后,都要 npm start 重启服务器

  • 发送请求

    axios({      url:'/ajax/mostExpected?limit=10&offset=0&token=&optimus_uuid=C43ACD00C40211EDB6FB1DC502B2262A6C9A830AE637431CBD63E72665CE4A70&optimus_risk_level=71&optimus_code=10',      method:'get'    }).then(res=>{      console.log(res.data);    })

CSSModule

避免所有样式全局剩下,造成样式可能被错误覆盖

使用CSS Modules后,样式默认局部

对于class选择器、id选择器、以及加了class/id的标签选择器有效(.active ul li{})

  • 将css文件名改为 => Film.module.css

  • 引入css文件

    import style from './css/Film.module.css'
  • .............................. //css文件中 .zhangsan{ color:green;        }

如果想要切换到全局模式

  • 定义全局样式

    :global(.active){    color:yellow;}
  • 定义多个全局样式

    :global{    .link{        color:red;    }    .box{        color:blue;    }}