React(五) —— 路由的使用

个人主页：个人主页

✌支持我 ：点赞收藏关注

⛳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重定向

//引入redirect
import {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包裹时，组件中会获得形参props
    this.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;
      }
  }