express里获取出url里的参数后，如何将这个参数传到react中

发布于 2022-09-06 02:43:35 字数 1907 浏览 16 评论 0

概述：后台为express搭建，使用ejs为模板语言

app.set('view engine', 'html');
app.engine('html', ejs.renderFile);

在express的中间件中添加了一个路由


app.use('/biquge/:bookid',router.getBookDetatl)

路由文件：

exports.getBookDetatl=function (req,res) {
    ...
    //先获取bookid，再将这个bookid传到要渲染的模板中
     res.render('biquge/bookDetail')

}

现在的问题是，我这个模板是react生成的
模板如下,后缀为html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>biquge</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
    <link type="text/css" rel="stylesheet" href="/static/semantic.min.css" >
</head>
<body>
<div id="root"></div>
</body>
<script src="/static/bookDetail.js"></script>
<script src="/static/jquery.min.js"></script>
<script src="/static/semantic.min.js"></script>
</html>

其中bookDetail.js是我react的入口文件，如下：

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import BookDetail from './view/bookDetail/BookDetail.js';

ReactDOM.render(
    <BookDetail />,
    document.getElementById('root')
)

在引用的BookDetail组件中，我想要在componentDidMount这个生命周期拿到之前提到的bookid，然后用这个bookid，post到后台提供的接口中去,例如:

componentDidMount(){
    fetch('/biquge/interface/getChapters',{method:'POST',body:'bookid=111'})
        .then(res=>{
            return res.json();
        }).then(chapterList=>{
            this.setState({chapterList})
        })
}

最后用这个chapterList进入react的渲染
在上面这一整个过程中，解决不了的一步就是如何将express中的bookid传到这个react的组件里去，万分恳请各位大佬提点建议，或者其它思路
ps.有一个解决方案是在组件里用window.location获取，这样是可以获取出来的，但是感觉违背了我之前的设计思路，不怎么想用

分享到QQ

分享到微博