如何将使用SocketIO检索的JSON数据传递给React中的Routes？

问题描述

我需要获取路由中的变量以从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;

创建路线的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;

1. 我使用SocketIO从Flask后端获取JSON数据
2. 保存JSON数据作为响应（我相信）
3. 然后，我希望每个路线（页面）中的每个路线都可以访问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"
  />
  ...
}