`react路由：`路由传参params、search、state(含二级路由和三级路由)

`一、准备工作：`

1、创建myProject05-router目录

2、创建清单文件， npm init -y

3、安装第三方依赖包，npm install react react-dom react-scripts react-router-dom@5 --save

4、创建public文件夹，在该文件夹下创建index.html

5、创建src文件夹，在该文件夹下创建：

（1）入口文件index.js

（2）组件App.js和App.css文件

（3）pages文件夹，在该文件夹下创建Home文件夹

（4）Home文件夹下创建Cates文件夹(Cates.jsx)、Goods文件夹（Goods.jsx、Goods.css、Detail文件夹（Detail.jsx））、Home.jsx、Home.css

（5）About.jsx、Resolve.jsx

6、工程目录：

`二、编写代码：`

1、index.html：

<div id="root"></div>

2、index.js：

import ReactDOM from 'react-dom/client'
import App from './App'
import {BrowserRouter} from 'react-router-dom'const root = ReactDOM.createRoot(document.getElementById('root'))root.render(<BrowserRouter><App/> </BrowserRouter>
)

3、App.js：

import React, { Component } from 'react'
import {NavLink, Redirect, Route, Switch} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home/Home'
import Resovle from './pages/Resovle'
import './App.css'export default class App extends Component {render() {return (<div className='app'>{/* 制作导航菜单 */}<div className='tabs'><NavLink to='/home'>首页</NavLink><NavLink to='/resovle'>解决方案</NavLink><NavLink to='/about'>关于我们</NavLink></div>{/* 注册路由（其实就是路径和组件的映射关系） */}{/* 精准匹配 */}<Switch><Route path='/home' component={Home}/><Route path='/resovle' component={Resovle}/><Route path='/about' component={About}/><Redirect to='/home'/></Switch></div>)}
}

4、App.css:

.app {width: 400px;margin: 10px auto;
}.tabs {display: flex;flex-direction: rows;}.tabs a{flex: auto;padding: 10px 30px ;background-color: #777;color: white;margin-right: 1px;text-decoration: none;
}

5、Home.jsx:

import React, { Component } from 'react'
import { NavLink, Redirect, Route, Switch } from 'react-router-dom'
import Cates from './Cates/Cates'
import Goods from './Goods/Goods'
import './Home.css'export default class Home extends Component {render() {return (<div className='home'><div className='left'><NavLink to='/home/cates'>分类</NavLink><NavLink to='/home/goods'>商品</NavLink></div><div className='right'><Switch>{/*二级路由 - 需要在前面加上一级路由的路径才可以找到*/}<Route path='/home/cates' component={Cates}/><Route path='/home/goods' component={Goods}/><Redirect to='/home/goods'/></Switch></div></div>)}
}

6、Home.css：

.home {margin-top: 10px;display: flex;flex-direction: rows;height: 200px;
}.home .left {display: flex;width: 120px;flex-direction: column;background-color: skyblue;margin-right: 1px;
}.home .left a {text-decoration: none;color: #333;padding: 10px 0;text-align: center;
}.home .left .active {background-color: orange;
}.home .right {flex: auto;background-color: greenyellow;
}

7、About.jsx：

import React, { Component } from 'react'export default class About extends Component {render() {return (<div>这是关于我们内容</div>)}
}

8、Resovle.jsx：

import React, { Component } from 'react'export default class Resovle extends Component {render() {return (<div>这是解决方案内容</div>)}
}

9、Cates.jsx：

import React, { Component } from 'react'export default class Cates extends Component {render() {return (<div>分类组件内容</div>)}
}

10、Goods.css：

.goods .list{display: flex;justify-content: space-around;background-color: plum;
}.goods .list a {text-decoration: none;color: #333;margin: 10px;
}

`示例一：params方法传递参数：`

11、Goods.jsx：

import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail/Detail'import './Goods.css'export default class Goods extends Component {state = {googList: [{ id: 1, title: 'AAA', desc: 'aaaaaaaaaaaaaa' },{ id: 2, title: 'BBB', desc: 'bbbbbbbbbbbbbb' },{ id: 3, title: 'CCC', desc: 'cccccccccccccc' }]}render() {return (<div className='goods'><div className='list'>{{/*路由链接（携带参数）： <Link to=`/home/goods/detail/${e.id}`>标题</Link>注册路由（声明接收）：  <Route path='/home/goods/detail/:id' component={Detail} />接收参数：this.props.match.params*/}this.state.googList.map(e => <Link key={e.id} to={`/home/goods/detail/${e.id}`}>{e.title}</Link>)}</div>{/* 三级路由 - 需要在前面加上二级路由的路径才可以找到*/}<Route path='/home/goods/detail/:id' component={Detail} /></div>)}
}

12、Detail.jsx：

import React, { Component } from 'react'export default class Detail extends Component {getDataById = id => {const data = [{ id: 1, title: 'AAA', desc: 'aaaaaaaaaaaaaa' },{ id: 2, title: 'BBB', desc: 'bbbbbbbbbbbbbb' },{ id: 3, title: 'CCC', desc: 'cccccccccccccc' }]return data.find(e => e.id == id)}render() {const { id } = this.props.match.paramsconst goodsDetail = this.getDataById(id)return (<div><p>id: {goodsDetail.id}</p><p>title: {goodsDetail.title}</p><p>desc: {goodsDetail.desc}</p></div>)}
}

`示例二：search方法传递参数：`

使用search方法，获取到的是’?id=1’字符串，这时可以借助第三方包query-string（npm install query-string --save）解析url字符串。

eg. let {id} = queryString.parse(this.props.location.search) ：把url字符串转换成对象

11、Goods.jsx：

import React, { Component } from 'react'
import {Link, Route} from 'react-router-dom'
import Detail from './Detail/Detail'import './Goods.css'export default class Goods extends Component {state = {googList:[{id:1,title:'AAA',desc:'aaaaaaaaaaaaaa'},{id:2,title:'BBB',desc:'bbbbbbbbbbbbbb'},{id:3,title:'CCC',desc:'cccccccccccccc'}]}render() {return (<div className='goods'><div className='list'>{{/*路由链接（携带参数）： <Link to=`/home/goods/detail?id=${e.id}`>标题</Link>注册路由（无需声明，正常注册即可）：  <Route path='/home/goods/detail' component={Detail} />接收参数：this.props.location.search备注：获取到的search时urlencoded编码字符串，需要借助第三方包query-string解析*/}this.state.googList.map( e => <Link key={e.id} to={`/home/goods/detail?id=${e.id}`}>{e.title}</Link>)}</div><Route path='/home/goods/detail' component={Detail}/></div>)}
}

12、Detail.jsx：

import React, { Component } from 'react'
import queryString from 'query-string'export default class Detail extends Component {getDataById = id => {const data = [{ id: 1, title: 'AAA', desc: 'aaaaaaaaaaaaaa' },{ id: 2, title: 'BBB', desc: 'bbbbbbbbbbbbbb' },{ id: 3, title: 'CCC', desc: 'cccccccccccccc' }]return data.find(e => e.id == id)} render() {let {id} = queryString.parse(this.props.location.search)let goodsDetail = this.getDataById(id)return (<div><p>id: {goodsDetail.id}</p><p>title: {goodsDetail.title}</p><p>desc: {goodsDetail.desc}</p></div>)}
}

`示例三：state方法传递参数：`

11、Goods.jsx：

import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail/Detail'import './Goods.css'export default class Goods extends Component {state = {googList: [{ id: 1, title: 'AAA', desc: 'aaaaaaaaaaaaaa' },{ id: 2, title: 'BBB', desc: 'bbbbbbbbbbbbbb' },{ id: 3, title: 'CCC', desc: 'cccccccccccccc' }]}render() {return (<div className='goods'><div className='list'>{{/*路由链接（携带参数）： <Link to={{ pathname: '/home/goods/detail', state: { id: e.id } }}>标题</Link>注册路由（无需声明，正常注册即可）：  <Route path='/home/goods/detail' component={Detail} />接收参数：this.props.location.state备注：刷新时参数保留*/}//    pathname -> 路径         state -> 传的id值放在state中this.state.googList.map(e => <Link key={e.id} to={{ pathname: '/home/goods/detail', state: { id: e.id } }}>{e.title}</Link>)}</div><Route path='/home/goods/detail' component={Detail} /></div>)}
}

12、Detail.jsx：

import React, { Component } from 'react'export default class Detail extends Component {getDataById = id => {const data = [{ id: 1, title: 'AAA', desc: 'aaaaaaaaaaaaaa' },{ id: 2, title: 'BBB', desc: 'bbbbbbbbbbbbbb' },{ id: 3, title: 'CCC', desc: 'cccccccccccccc' }]return data.find(e => e.id == id)}render() {// console.log(this.props.location.state);let { id } = this.props.location.statelet goodsDetail = this.getDataById(id)return (<div><p>id: {goodsDetail.id}</p><p>title: {goodsDetail.title}</p><p>desc: {goodsDetail.desc}</p></div>)}
}

13、运行结果静态图示例：

`三、运行命令`

npm react-scripts satrt

简化版：

在清单文件中添加一行命令 “start”: “react-scripts start”

运行命令：npm start

"scripts": {"start": "react-scripts start","test": "echo \"Error: no test specified\" && exit 1"}

           <p>title: {goodsDetail.title}</p><p>desc: {goodsDetail.desc}</p></div>)
}

}


   13、运行结果静态图示例：   [外链图片转存中...(img-yyWH1Sju-1659573277958)]### `三、运行命令` [npm react-scripts satrt]()    简化版：             在清单文件中添加一行命令   ["start": "react-scripts start"]()         运行命令：[npm start]()```json
"scripts": {"start": "react-scripts start","test": "echo \"Error: no test specified\" && exit 1"}

react路由：路由传参params、search、state相关推荐

vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vuejs中路由的传参以及路由props配置
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
Vue-admin工作整理（四）：路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...
React通过url传参和通过路由传参
是基于我写的上一篇文章<用react的路由写一个简单的导航>上面扩展出来的,朋友们可以去康康. 通过url传参的方法有: 1)直接? 接收:this.props.location.sear ...
vue路由传参—params—query
1.Params的方式类似于get请求,传递的数据会在浏览器地址显示 Params路由传参分为三步: 1.绑定参数在你传参的路由绑定参数 2.发送数据 3.接收参数在路由页面用this.$rou ...
vue router 的路由传参 params 和 query 的区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...
Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
每天一点点之 taro 框架开发 - taro路由及传参
1.路由 taro的路由是自带的,不需要我们额外配置,只需要我们在app.js下config中配置pages即可 class App extends Component {config = {page ...

react路由：路由传参params、search、state

`react路由：`路由传参params、search、state(含二级路由和三级路由)

`一、准备工作：`

`二、编写代码：`

`示例一：params方法传递参数：`

`示例二：search方法传递参数：`

`示例三：state方法传递参数：`

`三、运行命令`

react路由：路由传参params、search、state相关推荐

最新文章

热门文章

react路由：路由传参params、search、state

react路由：路由传参params、search、state(含二级路由和三级路由)

一、准备工作：

二、编写代码：

示例一：params方法传递参数：

示例二：search方法传递参数：

示例三：state方法传递参数：

三、运行命令

react路由：路由传参params、search、state相关推荐

最新文章

热门文章

`react路由：`路由传参params、search、state(含二级路由和三级路由)

`一、准备工作：`

`二、编写代码：`

`示例一：params方法传递参数：`

`示例二：search方法传递参数：`

`示例三：state方法传递参数：`

`三、运行命令`