路由跳转传参
第一种方式
<Route strict exact path="/interface/:id" component={Inteface}></Route>
我们在Interface接受下
import React from "react";
const Inteface=(props)=>{
console.log(props);
return(
Inteface
)
}
export default Inteface
我们直接打印。
没有传递参数如上,那么传递参数呢
http://localhost:3000/#/interface/1000
这样就打印出来了参数,有些人可能就说了,不传递参数也不能报404 ,可能不带参数,那么应该怎么解决呢
很简单,只需要做如下修改
<Route strict exact path="/interface/:id?" component={Inteface}></Route>
在参数后面增加一个?即可。这样,不带参数访问,也不会报404了。
多个参数传递也是可以的
<Route strict exact path="/interface/:id?/:name?" component={Inteface}></Route>
很简单就能实现了。访问下,打印正常
http://localhost:3000/#/interface?name=beijing
那么这样的我们怎么取来name 呢
const Inteface=(props)=>{
const parans=new URLSearchParams(props.location.search)
console.log(parans.get("name"));
return(
<h1>Inteface</h1>
)
}
export default Inteface
我们打印下
第二种读取方案:
const value=querystring.parse(props.location.search)
console.log(value);
这样也可以读取到。