一、通过params
（以
GoodsList
.js
为例
）
解释：组件之间传递参数时，一般都是键值对的方式，如：username=tianwater。
1、传值
(
需要修改两个地方
)
：
1）、路由表中
（写键名）
<Route path='/gla/Pencil/
:id
' component={Pencil} />
<Route path='/gla/Eraser/
:name
' component={Eraser} />
2）、
Link（NavLink）处
（写键对应的值）
<NavLink to=
{'/gla/Pencil/'+'01008'}
>铅笔</NavLink>
<NavLink to='/gla/Eraser/
橡皮02
' >橡皮</NavLink>
2、获取值：
1）、在
“Pencil.js”
里
商品编号：{this.props.match.params.
id
}<br/>
2）、在“Eraser.js”里
商品名称：{this.props.match.params.name}<br/>
PS：经过以上的更改后，文件“GoodsList.js”，“Pencil.js”，“Eraser.js”的代码分别为（可以复制以下代码）：
1）、GoodsList
.js
文件：
import React, { Component } from 'react';
import { BrowserRouter, Route,NavLink} from 'react-router-dom';
import Pencil from './Pencil';
import Eraser from './Eraser';
class GoodsList extends Component{
render(){
return (
<BrowserRouter>
<div>欢迎来到商品列表页面</div><br/>
<NavLink to={'/gla/Pencil/'+'
01008
'} >铅笔</NavLink>
<NavLink to='/gla/Eraser/
橡皮02
' >橡皮</NavLink>
<Route path='/gla/Pencil/
:id
' component={Pencil} />
<Route path='/gla/Eraser/:
name
' component={Eraser} />
</BrowserRouter>
export default GoodsList;
2）、Pencil.js文件：
import React,{Component} from 'react';
class Pencil extends Component{
render(){
return (
商品编号：{
this.props.match.params.
id
}<br/>
商品名称：铅笔<br/>
商品描述：铅笔好，铅笔好，铅笔写错还可以擦掉<br/>
export default Pencil;
3）、Eraser.js文件：
import React, { Component } from 'react';
class Eraser extends Component{
render(){
return (
商品编号：01002<br/>
商品名称：{
this.props.match.params.name
}<br/>
商品描述：橡皮好，橡皮好，橡皮可以擦掉铅笔写<br/>
export default Eraser;
ok，第一种方式大功告成！
下一篇是第二种方式：
通过query的方式
{pathname:"/xx",search:'?键
值
对',hash:"#xxx",state:{键
值
对}}
会自动将pathname、search、hash拼接在url
路
径上,state为
传
入的参数
可通过输出props查看对象内的信息
2、Link的replace属性
添加replac...
文章目录嵌套
路
由的实现模板文件index.html入口文件index.jsApp.js（App组件）Header/index.jsx（Header组件）About/index.jsx（About组件）Home/index.jsx（Home组件）News/index.jsx（News组件）Message/index.jsx（Message组件）
路
由
传
递
params
参数万事俱备Detail/index.jsx（Detail组件）Message/index.jsx（Message组件）东风来了Detail/ind
1.
params
父
传
参
import
React
, { Component } from '
react
'
import Detail from "./Detail/";
import { Link, Switch,Route } from '
react
-router-dom';
export default class Message extends Component {
state = {
MessageArr: [
{ id: '01', title: '消息1' },
，创建
react
项目：router_app。默认使用当前
react
的最新版本：
react
@18、
react
-dom@18。
，默认下载安装最新版本r：
react
-router-dom@6。涉及的文件包括：
入口文件index.js
routes/index.js
入口组件App.js
pages/Home/index.jsx（Home组件）
pages/About/index.jsx（About组件）
pages/News/index.jsx（News组件）
pages/Message/inde
本文主要介绍
React
Router定义
路
由之后如何
传
值
，有关
React
和
React
Router
的基础请参考阮老师的博客注：本文示例
React
Router版本为：3.0.2，使用前请注意检查版本一.props.
params
官方例子使用
React
router定义
路
由时，我们可以给<Route>指定一个path，然后指定通配符可以携带参数到指定的path：
首先定义
路
由到UserPage页面
1、hook的由来和作用
react
16.8以后的新特性Hooks函数组件在
react
16.8以前函数组件只能被动接收外部数据，并且没有自己的生命周期钩子函数，函数内部也没有this可用新特性Hookhook推出的动机主要是因为类组件有一下几个不足组件之间复用公共逻辑比较麻烦，以前常见的提取组件公共逻辑的方式有高阶组件/renderProps等，但这些方式或多或少都对原有组件的代码组织方式有一定的破坏性复杂组件变得难以理解（例如相同的逻辑可能要写在不同的生命周期钩子函数里面）
com2/:name/:job 表示 /com2的下一级
路
由参数就是name，name的下一级
路
由参数就是job
如果
路
由是这样的，例如：com2/lisi/student那么匹配规则，就有 name = 'lisi', job = 'studen...
vue
传
参的原理主要在于 Vue.route.
params
(也有route.
params
(也有route.
params
(也有 route.query)
route是Vue的属性.
params
是route是Vue的属性.
params
是route是Vue的属性.
params
是route的属性,用来储存数据的键
值
对.就是说它对象,...
