App

<StyledApp>
      <BrowserRouter>
          <Switch>
              <Route path="/" component={Main} />
          </Switch>
      </BrowserRouter>
</StyledApp>

Main

<Box width="100%" height="100%">
    <Header />
    <SideBar />
    <BodyBox flex={1}>
        <Switch>
            <Route path="/" exact component={LiveCollection} />
            <Route path="/channel" component={Channel} />
            <Route path="/socket" component={SocketTest} />
        </Switch>
    </BodyBox>
</Box>

라우트 경로에 특정값을 넣는 방법

• params 를 사용하는 것
• query 를 사용하는 것

라우트로 설정한 컴포넌트는 총 3가지의 props를 전달받게 된다.

1. history → 이 객체를 통해 push , replace 를 하며 다른 경로로 이동하거나 앞 뒤 페이지로 전환 가능
2. location → 이 객체는 현재 경로에 대한 정보를 가지고 있고 URL 쿼리 (/about?foo=bar) 형식의 정보도 가지고 있음
3. match → 이 객체는 어떤 Route에 매칭되었는지에 대한 정보가 있고 params (/about/:name) 형식의 정보도 가지고 있음

"/about/:name" URL이라고 가정해보자

import React from 'react';

const About = ({match}) => {
    return (
        <div>
            <h2>About {match.params.name}</h2>
        </div>
    );
};

export default About;

⇒ match.params.name 으로 param name의 값을 확인 가능