react.js javascript 前端 前端框架 react路由：路由传参params、search、state

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：

​ 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(

)

​ 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 (

)

}

}

​ 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 (

)

}

}

​ 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 (

)

}

}

​ 8、Resovle.jsx：

import React, { Component } from 'react'

export default class Resovle extends Component {

render() {

return (

)

}

}

​ 9、Cates.jsx：

import React, { Component } from 'react'

export default class Cates extends Component {

render() {

return (

)

}

}

​ 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 (

)

}

}

​ 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.params

const goodsDetail = this.getDataById(id)

return (

)

}

}

示例二：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 (

)

}

}

​ 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 (

)

}

}

示例三：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 (

)

}

}

​ 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.state

let goodsDetail = this.getDataById(id)

return (

)

}

}

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

三、运行命令

​ npm react-scripts satrt

​ 简化版：

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

​ 运行命令：npm start

"scripts": {

"start": "react-scripts start",

"test": "echo \"Error: no test specified\" && exit 1"

}

title: {goodsDetail.title}

desc: {goodsDetail.desc}