Overnap

루트 컴포넌트에 라우터와 소켓 컨텍스트 추가

1 import React from 'react'; 1 import React from 'react';
2 +import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
3 +import { socket, SocketProvider } from './SocketContext';
4 +import { Login } from './Login';
2 5
3 -function App() { 6 +const App: React.FC = () => {
4 return ( 7 return (
5 - <div className="App"> 8 + <SocketProvider value={socket}>
6 - <div className="ml-3 mb-3 font-bold text-2xl">TESTING</div> 9 + <Router>
7 - <header className="App-header"> 10 + <Switch>
8 - <p> 11 + <Route exact path='/' component={Login}/>
9 - Edit <code>src/App.tsx</code> and save to reload. 12 + <Route path='/rooms'></Route>
10 - </p> 13 + <Route path='/:roomId'></Route>
11 - <a 14 + </Switch>
12 - className="App-link" 15 + </Router>
13 - href="https://reactjs.org" 16 + </SocketProvider>
14 - target="_blank"
15 - rel="noopener noreferrer"
16 - >
17 - Learn React
18 - </a>
19 - </header>
20 - </div>
21 ); 17 );
22 } 18 }
23 19
......
1 +import React from 'react';
2 +import { io } from 'socket.io-client';
3 +
4 +export const socket = io('http://localhost/');
5 +const SocketContext = React.createContext(socket);
6 +
7 +export const SocketProvider = SocketContext.Provider;
8 +export const SocketConsumer = SocketContext.Consumer;
9 +export default SocketContext;