React Router v6路由组件传参params/search/state(router v6)
Posted codeMak1r.小新
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Router v6路由组件传参params/search/state(router v6)相关的知识，希望对你有一定的参考价值。
欢迎来到我的博客
React路由安装使用和多种方式传参
安装路由
npm i react-router-dom -S引入路由
import
BowserRouter as Router,
Route,
Switch,
...
from "react-router-dom"
整个项目顶层需要用<Router>包裹 并且 <Router>组件内只能有一个直接子级元素
例如:
let App = props => (<Router>
<div>
<Route path="xxx" component=xxx />
<Route path="xxx" component=yyy />
...
</div>
</Router>)render(<App />,document.getElementById("app"))
使用BowserRouter需要对服务器做配置 对于webpack-dev-server而言 需要添加属性
devServer :
conentBase:"",
...,
historyApiFallback:true,
disableHostCheck: true,
Route组件有下列属性
path : 路径
component : 组件
redirect : 重定向
exact : 严格匹配react中 4.0之后的路由采用的是分布式路由 <Route> 本身即路由窗口
在该版本的路由中 默认即多视图路由
只要多个Route 配置相同路径 即可在同一路径下加载多个组件若只希望一个路径下仅加载一个组件 用<Switch>包裹住多个<Route>即可
例如:
<Switch>
<Route path="xxx" component=xxx />
<Route path="xxx" component=yyy />
</Switch>
此时 路径为xxx时 仅加载xxx而并非加载 xxx 和 yyy
路由跳转
标签跳转
<Link to= pathname:"/home" >首页</Link>js跳转(编程式导航)
this.props.history.push()
this.props.history.replace()
值得注意的是 并非所有组件的props都有history属性
仅在通过<Route>加载进来的组件 props下才会存在history属性如果props不存在history属性的子组件也想通过js实现路由跳转
可用props有history属性的父组件通过props传递给子组件即可路由传参
search传参(问号传参)
<Link to pathname:"/home",search:data ></Link>
接收参数
this.props.location.search 接收即可
只是此时 search为字符串类型格式如下: username=zhuiszhu&age=18
需要我们手动转换成对象才能方便使用params传参(动态路由)
路由配置
<Route path="/detail/:id" />传递参数
let goodsID = 123
<Link to=pathname:"/detail/"+goodsID ></Link>接收参数
this.props.match.params.id
此处props的math同上述中的history属性以上是关于React Router v6路由组件传参params/search/state(router v6)的主要内容，如果未能解决你的问题，请参考以下文章