———-Chat.Js———- Import React, { useState, useEffect} from "react"; import queryString from "query-string"; import

io from "socket.io-client";

import './Chat.css';

let socket;

const Chat = ({ location }) => {
const [name, setName] = useState('');
const [room, setRoom] = useState('');
const ENDPOINT = 'localhost:5000';

useEffect(() => {
const { name, room} = queryString.parse(location.search);

socket = io(ENDPOINT);

setName(name);
setRoom(room);

console.log(socket);
}, [ENDPOINT, location.search])

return (
<h1>Chat</h1>
);
}

export default Chat;



———-Join.js———-

import React, { useState } from 'react';
import { Link } from "react-router-dom";

import './Join.css';

export default function SignIn() {
const [name, setName] = useState('');
const [room, setRoom] = useState('');

return (
<div className="joinOuterContainer">
<div className="joinInnerContainer">
<h1 className="heading">Join</h1>
<div>
<input placeholder="Name" className="joinInput" type="text" onChange={(event) => setName(event.target.value)} />
</div>
<div>
<input placeholder="Room" className="joinInput mt-20" type="text" onChange={(event) => setRoom(event.target.value)} />
</div>
<Link onClick={e => (!name || !room) ? e.preventDefault() : null} to={/chat?name=${name}&room=${room}}>
<button className={'button mt-20'} type="submit">Sign In</button>
</Link>
</div>
</div>
);
}

Залей на пастебин или песочницу

Что за портянка, отформатируй fmt.println("text")