[{"createTime":1735734952000,"id":1,"img":"hwy_ms_500_252.jpeg","link":"https://activity.huaweicloud.com/cps.html?fromacct=261f35b6-af54-4511-a2ca-910fa15905d1&utm_source=V1g3MDY4NTY=&utm_medium=cps&utm_campaign=201905","name":"华为云秒杀","status":9,"txt":"华为云38元秒杀","type":1,"updateTime":1735747411000,"userId":3},{"createTime":1736173885000,"id":2,"img":"txy_480_300.png","link":"https://cloud.tencent.com/act/cps/redirect?redirect=1077&cps_key=edb15096bfff75effaaa8c8bb66138bd&from=console","name":"腾讯云秒杀","status":9,"txt":"腾讯云限量秒杀","type":1,"updateTime":1736173885000,"userId":3},{"createTime":1736177492000,"id":3,"img":"aly_251_140.png","link":"https://www.aliyun.com/minisite/goods?userCode=pwp8kmv3","memo":"","name":"阿里云","status":9,"txt":"阿里云2折起","type":1,"updateTime":1736177492000,"userId":3},{"createTime":1735660800000,"id":4,"img":"vultr_560_300.png","link":"https://www.vultr.com/?ref=9603742-8H","name":"Vultr","status":9,"txt":"Vultr送$100","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":5,"img":"jdy_663_320.jpg","link":"https://3.cn/2ay1-e5t","name":"京东云","status":9,"txt":"京东云特惠专区","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":6,"img":"new_ads.png","link":"https://www.iodraw.com/ads","name":"发布广告","status":9,"txt":"发布广告","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":7,"img":"yun_910_50.png","link":"https://activity.huaweicloud.com/discount_area_v5/index.html?fromacct=261f35b6-af54-4511-a2ca-910fa15905d1&utm_source=aXhpYW95YW5nOA===&utm_medium=cps&utm_campaign=201905","name":"底部","status":9,"txt":"高性能云服务器2折起","type":2,"updateTime":1735660800000,"userId":3}]
react路由配置 1 安装react-router-dom 5.2.0 或者5.2.1 npm i react-router-dom --save-dev
2 在项目中创建router.js文件 import { BrowserRouter, Route } from 'react-router-dom';
class Router extends React.Component{ render() { return ( <BrowserRouter>
<Route exact path="/路径" component={路由组件}></Route> <Route strict exact
path="/路径/:自定义属性名" component={路由组件}></Route> // 动态路由匹配 /路径/123 /路径/name
</BrowserRouter> ) } } exact 为严格模式 strict 精确匹配 export default Router 3
在index.js文件中 引入 Router import Router from './Router' <React.StrictMode> <Router
/> </React.StrictMode> 注意: 在react-router-dom中有Link标签 相当于html里边a标签 或者
vue里边的router-link 格式 import {Link} from 'react-router-dom' <Link
to="/path路径">1111</Link> 路由组件传值 1 使用斜杠传值 格式: localhost:3000/topic/:id
path='/topic/:id' 获取参数id: this.props.match.params.id 2 使用问号传值
localhost:3000/topic path='/topic' /topic?id=123 获取参数
this.props.location.search 路由重定向 Redirect组件标签 本来应该去path路径 直接跳转其他的path路径 格式:
<Redirect from="来的路径" to="最终跳转显示的路径"/> 嵌套子路由 在进行路由匹配的时候 输入的一个路由地址为/app 渲染app组件
/app/a 渲染a组件 但是 我们想让 同时显示app组件 格式: <Route path="/app" render={()=> <App> <Route
path="/app/a" component={A}/> </App> }> 想要在/app/a里边能够正常的显示出来a组件 我们需要在app组件里边使用
{this.props.children}来渲染嵌套子组件的内容 react中将字符串的html转化为dom结构的html
使用dangerouslySetInnerHTML={{__html:state数据}} 直接作为元素的标签属性来使用