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

Question

我需要在我的路由中获取变量以从 JSON 数据更新并且有时还会发出数据，但我还没有想出如何将 response 传递到我的路由以进行访问.

App.js 检索 JSON 的文件：

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;

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;

我使用 SocketIO 从 Flask 后端获取 JSON 数据
JSON响应保存数据（我相信）
然后我希望路由（页面）中的每个路由都可以访问 JSON 数据。

感谢任何帮助，谢谢。

Answer 1

传递道具：

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"
  />
  ...
}

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

How do I pass JSON data retrieved with SocketIO to my Routes in React?

javascript

json

reactjs

react-router

flask-socketio