[Sendbird를 활용한 웹 채팅] 4. 라우팅 & 전체 스타일

1. 라우팅

Components/Router.js

import React from "react";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";

import GroupChat from "../Pages/GroupChat";
import OpenChat from "../Pages/OpenChat";
import Chatting from "../Pages/Chatting";
import Login from "../Pages/Login";
import MailLogin from "../Pages/MailLogin";

const Router = () => (
  <BrowserRouter>
    <>
      <Switch>
        <Route path="/" exact component={AllChat} />
        <Route path="/open" component={OpenChat} />
        <Route path="/group" component={GroupChat} />
        <Route path="/chatting/:url/:isopen" component={Chatting} />
        <Route path="/login" component={Login} />
        <Route path="/mail" component={MailLogin} />
        <Redirect from="*" to="/" />
      </Switch>
    </>
  </BrowserRouter>
);

export default Router;

 

2. 글로벌 스타일

Components/GlobalStyles.js

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyles = createGlobalStyle`
    ${reset};
    a{
        text-decoration:none;
        color:inherit;
    }
    *{
        box-sizing:border-box;
    }
    body{
        margin: 0 auto;
        max-width: 960px;
        color: #000;
        background: #fff;
    }
`;

export default GlobalStyles;

 

3. App.js

/App.js

import React from "react";
import GlobalStyles from "./Components/GlobalStyles";
import Router from "./Components/Router";

function App() {
  return (
    <>
      <GlobalStyles />
      <Router />
    </>
  );
}

export default App;

 

4. index.js

/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById("root")
);