如何解决如何将使用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;
- 我使用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"
/>
...
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。