【React】React-router路由

简介: React-router路由

路由的定义

路由是根据不同的url地址展示不同的内容或页面

注: 一个针对react设计的路由解决方案,可以友好的帮助解决React components到URL之间的同步映射关系

路由安装

npm i react-router-dom@5

路由的使用

导入路由

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

注:路由模式有HashRouter和BrowserRouter两种模式,其中BrowserRouter的路径没有#,样式好看,真正朝后端发请求,后端若没有对应的路径去处理路径,就会404

定义路由

<Route path="/films" component={Films} />

其中path是对应的路由路径,component是与路由对应的组件

Switch的使用

<Switch>
                <Route path="/films" component={Films} />
                <Route path="/cinemas" component={Cinemas} />
                <Route path="/center" component={Center} />
</Switch>

Switch的功能与switch语句功能一样,对传入的路由进行匹配选择,当匹配到一个path后将不再继续进行匹配

Rediret的使用

对于匹配不到的路径,可以使用Redirect进行重定向,直接调转到某个指定页面

<Redirect from='/' to='/films' exact />

注意:Redirect的的使用要与Switch结合使用,且在Switch中写在Route之后

嵌套路由

在父组件中定义路由

<Switch>
    <Route path="/films/nowplaying" component={nowplaying} />
    <Route path="/films/coming" component={coming}/>
    <Route path="/films/comingsoon" component={comingsoon} />
    <Redirect from='/films' to='/films/nowplaying'/>
</Switch>

路由跳转模式

声明式导航

<NavLink to={"/films"} activeClassName="active">电影</NavLink>

编程式导航

//方式一--通过父组件传的props参数
props.history.push ('/films')
//方式二--引入useHistory
import { useHistory } from 'react-router-dom'
 history.push(`/films`)

路由传参

路由传参共有三种模式–动态路由传参,query传参,state传参

动态路由传参

直接将传入的参数放置在路径中

history.push(`/detail/${id}`)

子组件获取页面id

props.match.params.myid

query传参

将传入的参数赋值到query参数中,自动拼接

history.push({pathname:"/detail",query:id})

子页面获取页面id

props.location.query

state传参

与query参数相似,将传入的参数赋值到state参数中,自动拼接

history.push({pathname:"/detail",state:{myid:id}})

子页面获取页面id

props.location.state.myid

路由拦截

对于某些页面的跳转需要用户满足一些条件,可以通过路由拦截阻止未满足的用户跳转到指定页面

<Route path='/center' render={(props)=>{
    return isAuth()? <Center {...props}></Center>:<Redirect to='/login' />
                }} />

反向代理

Reactke通过Proxy进行反向代理,解决跨域问题

https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

安装包下载

npm install http-proxy-middleware --save

在src文件夹下建立setuoProxy.js文件

文件内容如下

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/ajax',  //转发请求--接口地址带有/ajax前缀的接口路径才会被转发给target
    createProxyMiddleware({
      target: 'https://i.maoyan.com',   //target是api服务器访问的地址
      changeOrigin: true,
    })
  );
};

注:可配置多个代理

css module

在React中每个组件的css样式会统一出现在主页面,为避免样式覆盖,css module默认局部样式

使用步骤:

  • css文件命名后缀改为.module.css
  • 在组件中引入并可命名为style
import style from './css/Film.module.css'
  • 在对应的元素中使用该类名
<div className={style.film}>

注意:类名可进行字符串拼接

<div className={style.film +" aaa"}>

在css module文件中定义全局样式

:global(#kerwin){
  color:red
}

欢迎各位评论指正,期待你们的支持✨✨✨


目录
相关文章
|
1天前
|
JavaScript 前端开发 网络安全
vue与react路由拦截
vue与react路由拦截
10 4
|
14天前
|
前端开发
如何使用react-router v6快速搭建路由?
如何使用react-router v6快速搭建路由?
12 0
|
22天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
23 0
|
22天前
|
存储 资源调度 前端开发
React原理 即 React路由基础
React原理 即 React路由基础
41 1
|
1月前
|
JavaScript 前端开发 小程序
react-router4.2使用js控制路由跳转的3种方式
react-router4.2使用js控制路由跳转的3种方式
|
1月前
|
前端开发 JavaScript API
React 生态系统:路由、状态管理、调试、测试、组件库、文档……
React 生态系统:路由、状态管理、调试、测试、组件库、文档……
31 0
|
1月前
|
移动开发 前端开发 API
第三十二章 React路由组件的简单使用
第三十二章 React路由组件的简单使用
|
1月前
|
存储 前端开发 JavaScript
第三十章 React的路由基本使用
第三十章 React的路由基本使用
|
2月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
29 0
|
2月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
25 0