react页面获取url中输入的值并呈现（通过doit函数实现）

最新推荐文章于 2024-08-06 11:32:29 发布

置顶

zfan520

最新推荐文章于 2024-08-06 11:32:29 发布

阅读量3.9k

点赞数 1

分类专栏： Reactjs jade模板引擎文章标签： react获取url中的值 jade通过doit传递值至react中

本文链接：https://blog.csdn.net/zfan520/article/details/79188712

版权

本文详述了如何在React应用中从URL获取参数并展示。通过Express后台解析URL，Jade引擎利用doit函数传递值，再到Webpack配置及React组件接收，最后在React页面中通过props访问该值进行网络请求。

摘要由CSDN通过智能技术生成

最近需要做react页面获取url中传递的id，这个流程还是有点复杂的。url携带id传送给express后台，后台将id映射到jade引擎中，jade引擎通过doit函数传送给reactDOM，再通过react中的props将值传递给需要的页面，对应页面进行网络请求。

1、实现效果图

2、代码详细分析

2.1 url将值传递给express后台

输入的url传送到app中，app对这个url进行解析并得到id值。

app中获取id值，并传递到router中的detail中

app.get('*', function (req, res) {
//通过req获取浏览器中输入的url
  str = req.url
  if(str.indexOf('/question?id=')!=-1){
    //获取输入的id值
    num = str.replace(/[^0-9]/ig,"")
    //在此处进行跳转，并携带输入的id
    res.redirect('/detail'+'?id='+num)
  }
 }
})