Как разделить веб-сокет между компонентами

Question

Я изучал React две недели и столкнулся с проблемой, которую не знаю, как ее решить. Мой проект - это простое приложение для общения с другими людьми.

Я использую для связи с сервером WebSocket, но я не знаю, как разделить одно соединение сокета между всеми компонентами проекта.

Я пытался записать файл. js для совместного использования сокета путем простого экспорта и импорта этой переменной в другие компоненты она работает, но только в функциях, не включенных в компонент.

SocketProvider. js

let socket = new WebSocket("ws://ip:65000/srv");
export default socket;

Мне нужно это, чтобы правильно перенаправить пользователя к соответствующему компоненту проекта.

Войти. js

import React, {Component} from 'react';
import {Link} from "react-router-dom";
import socket from "./SocketProvider";
import { Redirect } from 'react-router-dom';


class Login extends Component {
    state = {
        logged: false
    };

    login = () => {

    const loginInput = document.querySelector('#loginInput').value;
    const passwordInput = document.querySelector('#passwordInput').value;

    const loginData = {
        "type": "login",
        "name": loginInput,
        "password": passwordInput
    }
        socket.onopen = () => {
    socket.send(JSON.stringify(loginData));
        }
    socket.onmessage = (e) => {
        const socketResponse = JSON.parse(e.data);
        const status = socketResponse.status;
       if(status==4)
     this.setState({logged: true});
    };

    };

    render() {
        const { logged } = this.state;
        if(logged){
            return <Redirect to={"/app"}/>
        }
        return (
            <div>
                <div className={"whateverInterface"}>

                    <h1 className={"whateverInterface__logo"}>LOGIN</h1>
                    <div className={"whateverInterface__form"}>
                        <div className="whateverInterface__form--object">Login</div>
                        <input type="text" className={"whateverInterface__input"} id={"loginInput"}/>
                        <div className="whateverInterface__form--object">Hasło</div>
                        <input type="password" className={"whateverInterface__input"}id= {"passwordInput"}/>
                    </div>
                    <button className={"whateverInterface__button"} id={"createAccountBtn"}
                            onClick={this.login}>Login
                    </button>
                    <div className={"whateverInterace__controls"}>

                    </div>
                </div>
            </div>
        );
    }
}
export default Login

Приложение. js

import React, {Component} from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import logo from './logo.svg';
import { TransitionGroup, CSSTransition } from "react-transition-group";
import './App.css';
import Error404 from './Error404';
import Login from "./Login";
import Main from "./Main";
import socket from "./SocketProvider";
import Register from "./Register";
import AppInterface from "./Interface";


class App extends Component {
    constructor() {
        super();
        this.state = {
            isLogged: true
        };
    }

    render() {
    return (
        <main>
            <Route
                render={({location}) => {
                    const {pathname} = location;
                    return (
                        <TransitionGroup>
                            <CSSTransition
                                key={pathname}
                                classNames="fade"
                                timeout={{
                                    enter: 350,
                                    exit: 350,
                                }}
                            >
                                <Route
                                    location={location}
                                    render={() => (
                                        <Switch>
                                            <div className={"content"}>
                                                <Route path="/whatever-react" component={Main} isLogged={this.state.isLogged} exact />
                                                <Route path="/login" component={Login} exact/>
                                                <Route path="/register" component={Register} exact/>
                                                <Route path="/app" component={AppInterface} exact/>
                                                <Route path='*' exact={true} component={Error404}/>
                                            </div>
                                        </Switch>
                                    )}
                                />
                            </CSSTransition>
                        </TransitionGroup>
                    );
                }}
            />
        </main>

    );
}

}

export default App;

Приложение. js - основной компонент с маршрутом, а Login. js - компонент, когда я пытался используйте сокет, чтобы правильно войти в мое приложение. Где я могу ошибиться?