React Router

"import { Redirect, Route, Switch, } from 'react-router-dom';"
라는 방식으로 라우터 패키지를 가져와서 쓸 수 있다.

  <Switch>
    <Route path="/profile/:id" component={Profile} />
    <Route path="/profile" component={Profile} />
    <Route path="/about" component={About} />
    <Route path="/" exact component={Home} />
    <Route component={NotFound} />
  </Switch>

이렇게 Switch 태그로 순서를 작은 범위부터, 큰 범위로 작성을 한다. 이 경우 props에 exact를 추가하지 않아도 된다.

그리고 밑에서 나오는 것 처럼 컴포넌트를 새로 만들고 component 라는 폴더에 파일을 만들어서 넣는다.

export default function Login(){
return (
    <div>
      <h2>Login 페이지입니다</h2>
      <LoginButton/>
    </div>
  );}

isActive라는 함수로 active 상태 여부를 판단하여, activeStyle을 해당 페이지가 로딩 되었을때 스타일을 적용해준다.

_        <NavLink
          to="/about" 
          activeStyle={activeStyle}
          isActive={(match, location) => {
            console.log(match,location);
            return match !== null && location.search === '';
          }}
        >
          About
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about?name=mark"
          activeStyle={activeStyle}
          isActive={(match, location) => {
             console.log(match, location);
            return match !== null && location.search === "?name=mark";
          }}
        >
          About?name=mark
        </NavLink>
_