React(五) —— 路由的使用

🧁个人主页：个人主页

✌支持我 ：点赞👍收藏🌼关注🧡

文章目录

  • ⛳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）定义路由

  <HashRouter>
    <Route path='/films' component={Films}/>
    <Route path='/cinemas' component={Cinemas}/>
    <Route path='/center'component={Center}>1111</Route>
  </HashRouter>

（3）路由重定向

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

//引入redirect
import {HashRouter,Redirect,Route} from 'react-router-dom'
..................................
<Redirect from='/' to="/films"></Redirect>

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

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

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

解决

引入Switch组件

import {HashRouter,Redirect,Route,Switch} from 'react-router-dom'
....................................
<Switch>
      <Route path='/films' component={Films}/>
      <Route path='/cinemas' component={Cinemas}/>
      <Route path='/center'component={Center}>1
      {/* 模糊匹配 凡是以/开头的都会跳转到films*/}
      <Redirect from='/' to="/films"></Redirect>
</Switch>

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

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

精准匹配

//语法
<Redirect from='/' to="/films" exact></Redirect>

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

............................................
<Switch>
   <Route path='/films' component={Films}/>
   <Route path='/cinemas' component={Cinemas}/>
   <Route path='/center'component={Center}>1111</Route>
   {/* 模糊匹配 凡是以/开头的都会跳转到films*/}
   <Redirect from='/' to="/films"></Redirect>
   {/* 精确匹配 */}
   <Redirect from='/' to="/films" exact></Redirect>
   <Route component={NotFound}></Route>
 </Switch>

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

（4）嵌套路由

//films组件中
<Switch>
    <Route path='/films/nowplaying' component={nowplaying}></Route>
    <Route path='/films/Comingsoon' component={Comingsoon}></Route>
    <Redirect from="/films" to="/films/nowplaying"></Redirect>
</Switch>

（5）路由跳转方式

（6）路由传参

（7）路由拦截

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

function isAuth(){
    return localStorage.getItem("token")
} 
............................................
<Route path='/center' render={()=>{
      return isAuth()?<Center/>:<Redirect to="/login"></Redirect>
}}></Route>

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

（8）路由模式

HashRouter模式

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

BrowserRouter模式

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

额外命名

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

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

（9）withRouter

作用

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

应用场景

  <Route path='/center' render={()=>{
            return isAuth()?<Center/>:<Redirect to="/login"></Redirect>
  }}></Route>
  //组件使用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 (
    <div>
      <div onClick={()=>{
        props.history.push(`/filmsorder`)
      }}>
      </div>
    </div>
  )
}
export default withRouter(Center)

🏫项目注意

反向代理

前端解决跨域问题

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

CSSModule

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

📍使用CSS Modules后，样式默认局部

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

如果想要切换到全局模式

标签 , ,

发表回复