Javascript 如何将SocketIO检索到的JSON数据传递到React中的路由？

我需要获取路由中的变量，以便根据JSON数据进行更新，有时还需要发出数据，但我还没有弄清楚如何将

response

传递给我的路由进行访问

获取JSON的App.js文件：

import React, { useState, useEffect } from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { ThemeProvider } from '@material-ui/styles';
import validate from 'validate.js';

import theme from './theme';
import 'react-perfect-scrollbar/dist/css/styles.css';
import './assets/scss/index.scss';
import validators from './common/validators';
import Routes from './Routes';

import socketIOClient from "socket.io-client";
const ENDPOINT = "http://127.0.0.1:5000";

const browserHistory = createBrowserHistory();

validate.validators = {
  ...validate.validators,
  ...validators
};

function App() {
  const [response, setResponse] = useState("");

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
    socket.emit('test', {"name": "jim"})
    socket.on("test_client", data => {
      setResponse(data);
    });
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <Router history={browserHistory}>
        <Routes />
      </Router>
    </ThemeProvider>
  );
}

export default App;

import React，{useState，useffect}来自“React”；
从“react Router dom”导入{Router}；
从“历史”导入{createBrowserHistory}；
从'@material ui/styles'导入{ThemeProvider}；
从“validate.js”导入validate；
从“/theme”导入主题；
导入“react perfect scrollbar/dist/css/styles.css”；
导入“/assets/scss/index.scss”；
从“./common/validators”导入验证程序；
从“./Routes”导入路由；
从“socket.io客户端”导入socketIOClient；
常量端点=”http://127.0.0.1:5000";
const browserHistory=createBrowserHistory（）；
validate.validators={
…验证.validator，
…验证器
};
函数App（）{
const[response，setResponse]=useState（“”）；
useffect（（）=>{
const socket=socketIOClient（端点）；
emit（'test'，{“name”：“jim”}）
socket.on（“测试客户端”，数据=>{
setResponse（数据）；
});
}, []);
返回(
);
}
导出默认应用程序；

Routes.js，其中创建了路由：

import React from 'react';
import { Switch, Redirect } from 'react-router-dom';

import { RouteWithLayout } from './components';
import { Main as MainLayout, Minimal as MinimalLayout } from './layouts';

import {
  Login as LoginView,
  Dashboard as DashboardView,
  Trading as TradingView,
  OrderHistory as OrderHistoryView,
  Account as AccountView,
  Settings as SettingsView,
  NotFound as NotFoundView
} from './views';

const Routes = () => {
  return (
    <Switch>
      <Redirect
        exact
        from="/"
        to="/dashboard"
        data={props.response}
      />
      <RouteWithLayout
        component={LoginView}
        exact
        layout={MinimalLayout}
        path="/login"
        data={props.response}
      />
      <RouteWithLayout
        component={DashboardView}
        exact
        layout={MainLayout}
        path="/dashboard"
        data={props.response}
      />
      <RouteWithLayout
        component={TradingView}
        exact
        layout={MainLayout}
        path="/trading"
        data={props.response}
      />
      <RouteWithLayout
        component={OrderHistoryView}
        exact
        layout={MainLayout}
        path="/orderhistory"
        data={props.response}
      />
      <RouteWithLayout
        component={AccountView}
        exact
        layout={MainLayout}
        path="/account"
        data={props.response}
      />
      <RouteWithLayout
        component={SettingsView}
        exact
        layout={MainLayout}
        path="/settings"
        data={props.response}
      />
      <RouteWithLayout
        component={NotFoundView}
        exact
        layout={MinimalLayout}
        path="/not-found"
        data={props.response}
      />
      <Redirect to="/not-found" />
    </Switch>
  );
};

export default Routes;

从“React”导入React；
从“react router dom”导入{Switch，Redirect}；
从“./components”导入{RouteWithLayout}；
从“/layouts”导入{Main as MainLayout，Minimal as MinimalLayout}；
进口{
以LoginView登录，
仪表板作为仪表板视图，
作为TradingView进行交易，
OrderHistory作为OrderHistoryView，
帐户作为AccountView，
设置为设置视图，
NotFound作为NotFoundView
}来自“./视图”；
常数路由=（）=>{
返回(
);
};
导出默认路径；

我使用SocketIO从Flask后端获取JSON数据

JSON数据是作为响应保存的（我相信）

然后，我希望每个路由（页面）都可以访问JSON数据

非常感谢您的帮助。

传递道具：

App.js：

<Routes data={response} />

Routes.js：

const Routes = ({ data }) =>
  ...
  <RouteWithLayout
    // pass props here
    component={routeProps => <LoginView {...routeProps} data={data} />}
    exact
    layout={MinimalLayout}
    path="/login"
  />
  ...
}

const Routes=（{data}）=>
...
}
准确的
布局={minimalayout}
path=“/login”
/>
...
}

通过PropsMethod将其传递给路由器，而不是路由。。把它传给你的实际路线。或者如果你想要quazi global的东西，你可以使用contextso just，然后在我的路线中，我可以使用{props.response.name}例如，道具不是魔法。传递和访问它们就像将参数从一个函数传递到另一个函数一样。我将此添加到每个路由中，但由于路由中有组件，例如

Dashboard

有一个

TotalProfit

组件，它显示我需要JSON在其中，我是否也可以将此道具传递到

TotalProfit

组件中？我不确定是否明白您的问题。如果你在

TotalProfits

中需要这些信息，如果你不传递道具，它怎么可能到达那里？它就像一个函数。。。如果一个函数不是封闭的或者你没有传递参数，它怎么能访问呢？我猜我一直假设道具会自动从父组件传递到子组件，显示子组件