react中的路由（【React】React-router路由）

时间2025-05-01 14:21:25分类IT科技浏览3509

导读：路由的定义路由是根据不同的url地址展示不同的内容或页面...

路由的定义

路由是根据不同的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

定义路由

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

Switch的使用

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

Rediret的使用

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

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

嵌套路由

在父组件中定义路由

路由跳转模式

声明式导航

编程式导航

//方式一--通过父组件传的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

在对应的元素中使用该类名

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

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

:global(#kerwin){ color:red }

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。