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

I need to get the variables in my routes to update from the JSON data and also sometimes emit data, but I haven’t figured out how to pass response to my Routes for accessing.

App.js file where the JSON is retrieved:

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 where the Routes are created:

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;

I get the JSON data from my Flask backend using SocketIO
JSON data is saved in response (I believe)
I then want the JSON data to be accessible by each Route in Routes (the pages).

Any help is appreciated, thank you.

Answer

Pass props along:

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

Advertisement

Answer