精华内容
下载资源
问答
  • react路由传参

    2021-02-19 08:52:40
    react路由传参有三种方式,其中放在路径中问号后面的参数(search参数),许多文章说用query传,尝试后发现不会出现在路径中 后来在Stack Overflow上找到相关问题,该方法可以用于router v3,v4及更高版本不可用,...

    最近想用react做个前端界面,看到路由这块,关于路由传参,有不少文章没有及时更新,会给人产生误导。

    react路由传参有三种方式,其中放在路径中问号后面的参数(search参数),许多文章说用query传,尝试后发现不会出现在路径中。

    后来在Stack Overflow上找到相关问题,该方法可以用于router v3,v4及更高版本不可用,17年官方github讨论中就确认这点。

    Stack Overflow和官方都有推荐方法:用一个叫qs的库,实现对象与search参数的字符串化和解析。

    汇总一下,react路由传参有三种方式:

    1、路径传参:
     链接书写:<Link to={`/path/${name}`}>path</Link>
    路由注册中用冒号注明有路径参数:<Route path='/path/:name' component={Path} />
    在Path组件中,通过解构赋值,从params中拿到路径参数,const { name } = this.props.match.params

    2、search传参:
    先引入qs包:import qs from "query-string"
    链接中除了路径,添加search参数:<Link to={{ pathname: '/search', search: qs.stringify({ name: yourName }) }}>search</Link>
    路由注册不需要特殊声明:<Route path='/search' component={Search} />
    这时点击链接,路径会变成:/search?name=yourName
    在Search组件中,也需要引入qs包来解析对象,然后通过解构赋值拿到参数:const { name} = qs.parse(this.props.location.search)

    3、state传参:
    链接中除了路径,添加state对象:<Link to={{ pathname: '/state', state: { name: yourName } }}>state</Link>
    路由注册也不需要特殊声明:<Route path='/state' component={Stete} />
    在State组件中,通过解构赋值const { name} = this.props.location.state拿到name参数

    这里之所以用state属性传递参数,是因为路由组件默认有一个state属性,与react组件的state属性无关。
    如果改用其他名字,比如aaa或者query,也可以。渲染的时候,会给location属性下添加相应属性。

    展开全文
  • react 路由传参

    2021-03-06 11:00:57
    react 路由传参 //跳转带参 const goToParames = (path, params) => { history.push({ pathname: path, query: { params }, }); }; //接值 props.location.query //跳转带参,刷新参数仍在 const ...

    react 路由传参

      //跳转带参
    const goToParames = (path, params) => {
        history.push({
          pathname: path,
          query: {
            params
          },
        });
      };
    //接值
    props.location.query
    
      //跳转带参,刷新参数仍在
      const goToParames = (path, params) => {
        history.push({
          pathname: path,
          state: {
            params
          },
        });
      };
    
    //接值
    props.location.state.params
    
    展开全文
  • React路由传参

    2020-03-23 23:27:52
    react 路由传参 params <Route path="/home/:type" component={Home}> <button onClick={this.change.bind(this,"users"}>跳转users</button> change(type){ this.props.history.push("/home/...

    react 路由传参

    • params
    <Route path="/home/:type" component={Home}>
    <button onClick={this.change.bind(this,"users"}>跳转users</button>
    
    change(type){
    	this.props.history.push("/home/" + type) // 编程式导航
    }
    
    获取参数:this.props.match.params.变量名
    

    优点:刷新后,地址栏参数依然存在
    缺点:只能传字符串

    • search
    <Route path="/home/goods" component={Home}>
    <Link to={{pathname:"/home/goods",search:"type=goods"}}>跳转goods</Link>
    
    获取参数:this.props.location.search.变量名
    

    优缺点同params

    • query
    <Route path="/home/goods" component={Home}>
    <Link to={{pathname:"/home/goods",query:{type:"goods",name:"abc"}}}></Link>
    
    获取参数:this.props.location.query.变量名
    

    优点:参数可传对象
    缺点:刷新页面,地址栏参数丢失

    • state
    <Route path="/home/goods" component={Home}>
    <Link to={{pathname:"/home/goods",state:{name:"abc"}}}></Link>
    
    获取参数:this.props.location.query.state.变量名
    

    优缺点同query

    参考:https://www.jianshu.com/p/ad8cc02b9e6c

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 477
精华内容 190
关键字:

react路由传参