ReactRouter5——参数传递

文章目录

• 1，路径参数
• 2，查询参数
• 3，state参数

1，路径参数

/user/1
/user/2

Route中，冒号参数名。

<Route path="/hello/:id" component={Hello}/>

接收方法：props.match.params.id。

举例：

<NavLink to="/aaa/你好，世界！">aaa</NavLink>

<Route path="/aaa/:msg" component={Hello1}/>

export default function (props) {
	return <h1>AAA{props.match.params.msg}</h1>
}

效果：

2，查询参数

/username=xxx&age=123

接收方法：props.location.search。

解析需要额外的库，比如querystring

npm i querystring

举例：

<NavLink to="/aaa?msg=你好，世界！">aaa</NavLink>

<Route path="/aaa" component={Hello1}/>

import qs from "querystring"
export default function (props) {
	return <h1>AAA{qs.parse(props.location.search.slice(1)).msg}</h1>
}

效果：

3，state参数

比较灵活。

<NavLink to={{pathname: "/aaa", state: {msg: "你好，世界！"}}}>aaa</NavLink>

<Route path="/aaa" component={Hello1}/>

export default function (props) {
	return <h1>AAA{props.location.state.msg}</h1>
}

效果：