测开技能--Web开发 React 学习（十七）

路由跳转传参

第一种方式

代码语言：javascript复制

<Route strict exact path="/interface/:id" component={Inteface}></Route>

我们在Interface接受下

代码语言：javascript复制

import  React from "react";


const Inteface=(props)=>{
    console.log(props);
    return(
Inteface
)
}
export default  Inteface

我们直接打印。

没有传递参数如上，那么传递参数呢

http://localhost:3000/#/interface/1000

这样就打印出来了参数，有些人可能就说了，不传递参数也不能报404 ，可能不带参数，那么应该怎么解决呢

很简单，只需要做如下修改

代码语言：javascript复制

<Route strict exact path="/interface/:id?" component={Inteface}></Route>

在参数后面增加一个？即可。这样，不带参数访问，也不会报404了。

多个参数传递也是可以的

代码语言：javascript复制

<Route strict exact path="/interface/:id?/:name?" component={Inteface}></Route>

很简单就能实现了。访问下，打印正常

代码语言：javascript复制

http://localhost:3000/#/interface?name=beijing

那么这样的我们怎么取来name 呢

代码语言：javascript复制

const Inteface=(props)=>{
    const parans=new URLSearchParams(props.location.search)
    console.log(parans.get("name"));

    return(
        <h1>Inteface</h1>
    )
}
export default  Inteface

我们打印下

第二种读取方案：

代码语言：javascript复制

const value=querystring.parse(props.location.search)
    console.log(value);

这样也可以读取到。

interface

0 人点赞