如何在反应中将请求标头从 express 传递到 index.js？答案

【问题标题】：How to pass request headers from express to index.js in react?如何在反应中将请求标头从 express 传递到 index.js？
【发布时间】：2021-03-04 04:10:11
【问题描述】：

我在快速服务器的请求标头中收到用户相关信息。我想在 index.js 中访问这些详细信息，以根据该参数应用条件路由。有没有办法存储这个运行时变量，该变量可以在 index.js 中访问，或者以其他方式将这些标头传递给 index.js 。我使用 react-scripts build 命令创建 src 文件夹的构建，server.js 使用此文件夹

server.js

const express = require("express");
const path = require("path");
const app = express(); 
app.use(express.static("build"));

app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
app.listen(5000, () => {
console.log("server started on port 5000");
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css? 
family=Roboto:300,400,500,700|Material+Icons" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
/>
<title>sample app</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

index.js

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
import User from "layouts/User.js";
import "assets/css/style.css";
const hist = createBrowserHistory();
ReactDOM.render(
 <Router history={hist}>
  <Switch>
    <Route path="/user" component={User} />
    <Redirect from="/" to="/dashboard" />
  </Switch>
 </Router>,
 document.getElementById("root")
 );

【问题讨论】：

标签： javascript reactjs express environment-variables react-router-dom

【解决方案1】：

您尝试了错误的方式，您无法直接从 express 传递任何信息以响应构建文件，您正在发送文件作为响应。要么使用一些模板引擎，如 pub、ejs，要么使用一些服务器端渲染框架，如 nextjs。

如果你真的想这样做，你需要

在 express 中创建提供信息的 API 端点，基本上是您想要的条件。
在 react 中创建一个 HOC 并将其用作 react-router 组件的父组件

如果你使用 react 16+，你可以使用 context API 代替 HOC

创建上下文

import React, {useState, createContext, useEffect} from 'react';

export const ApiContext = createContext();

export const ApiProvider = (props) => {
    const [data, setData] = useState(null);

    useEffect(async () => {
        const getURL = 'http://yourhost';
        const response = await fetch(getURL).json();
        setData(response);
    }, [])

    return (
        <ApiContext.Provider value={[data, setData]}>
            {props.children}
        </ApiContext.Provider>
    );
}

加载上下文

import React, {useContext} from 'react'
import {ApiContext} from './ApiContext'
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
import User from "layouts/User.js";
import "assets/css/style.css";
const hist = createBrowserHistory();

const App = (props) => {
    const [data, setData] = useContext(ApiContext)

    //you should have access to both data and setData

    return (
       <Router history={hist}>
        <Switch>
         <Route path="/user" component={User} />
         <Redirect from="/" to="/dashboard" />
        </Switch>
      </Router>
    )
}

【讨论】：

感谢您的回复。我对第2步创建一个父组件到react-router组件不是很清楚。您能否提供参考或更多说明如何做到这一点？
根据您的要求添加喷丝网，更多信息请参考stackoverflow.com/questions/61137644/…