Do I need to pass socket object between client files?

Question

Node.js

As the initial page, I render a comp. authorization, it connects to the server and creates a socket. For example, by clicking on the register button, through Link I get to the render computer. registration. How to correctly pass a socket reference via to={...} and get it in the registration file or chat? Or do I need to create sockets for all files separately? although what's the point.

Join.js

export default function SignIn() {

  const ENDPOINT = 'localhost:5000';
  let socket = io(ENDPOINT);

  return (
        <Link onClick={authorize} to={`/chat?name=${name}`}>
          <button className={'button mt-20'} type="submit">Sign In</button>
        </Link>
        <Link  to={`/registration`}>
          <button className={'button mt-20'} type="submit" >Sign Up</button>
        </Link>
  
  );
}

app.js

const App = () => {
  return (
    <Router>
      <Route path="/" exact component={Join} />
      <Route path="/chat" component={Chat} />
      <Route path="/registration" component={Registration} />
    </Router>
  );
}

Answer 1

You can raise the socket to the App level and pass it to routes or components in routes.