[React Router] 라우터 사용하기(react-router-dom v5)

• 컴포넌트는 HTML5 History API 를 사용하여 브라우저의 주소만 바꿀뿐, 페이지를 새로 불러오지는 않는다.

NavLink

• to prop을 특정 URL로 받아, 클릭 시 네비게이션 한다.

• NavLink의 경우, 매칭 시 어떤 스타일을 가질지 등의 추가 기능이 있다. (현재 path에 따라 스타일 적용 가능)

• to에 location object나 함수를 받을 수 있다.

Redirect

• Link와 비슷하나, 렌더링되면 to prop으로 지정한 path로 이동한다.

• Switch 안에서 쓰일 경우, from, to를 받아 이동하게 만듦. ex) from="/" to="/login"

<Link to="/about"><aboutPage></Link>

3) Route

<BrowserRouter>
      <Navigation />
      <Route path="/" exact={true}><Home /></Route>
      <Route path="/about" component={About} />
      <Route path="/movie/:id" render={(props) => props.id > 10 ? <Deatails> : ""} />
</BrowserRouter>

• 라우터는 상위 path가 있으면 호출되기 때문에 중복된다.
• path와 컴포넌트를 매칭한다.
• 매칭되는 컴포넌트는 children으로 넣어주거나, component prop으로 넘긴다.
• render prop으로 매칭되었을 때 실제 어떤 컴포넌트를 랜더링할지 통제할 수 있다.
• Router로 랜더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받는다.

4) switch

• 여러 Route 중 매치되는 Route 위에서부터 하나를 선택하여 렌더링한다.

• 매칭되는 Route가 없으면 아무것도 보여주지 않는다. fallback용으로 404 Not Found Page를 맨 아래에 배치할 수 있다

• path="/"의 경우 모든 path에 매칭되므로 exact 키워드를 추가하거나 가장 아래로 내린다.

<Switch>
  <Route exact path='/'>
    <Home mbtiArray={mbtiArray} />
  </Route>
  <Route path='/chat'>
    <Chat userObj={userObj} />
  </Route>
  <Route path='/profile'>
    <Profile userObj={userObj} typeInit={typeInit} />
  </Route>
  <Route>
    <Redirect to='/' />
  </Route>
</Switch>;

5. useHistory, useLocation, useParams, useRouteMatch

• 최상위 컴포넌트가 아니더라도, hook으로 react-router 관련 객체에 접근할 수 있음.

• history, location, params, match 객체에 접근함.

6. Private Router

• 특정 조건이 충족되지 않았을 때, 다른 페이지로 Redirect 하도록 하는 기능이다.
• 유저의 상세 페이지, 개인정보 변경 페이지 등을 이동하려고 할 때 사용한다.

Declartive 방법

function PrivateRoute({ component: Component, ...props }) {
  return (
    <Route
      {...props}
      render={(props) => {
        const isLoggedIn = !!getUserInfo();
        if (!isLoggedIn) {
          return <Redirect to='/login' />;
        }
        return <Component {...props} />;
      }}
    ></Route>
  );
}

Imperative 방법

function usePrivateRoute(validateFunc) {
  //  imperative
  const history = useHistory();
  useEffect(() => {
    if (!validateFunc()) {
      history.push('/login');
    }
  }, []);
}

6. query string

function App() {
  ...
  return (
    <Link to='/contact?email=example@example.com&address=Seoul'>Contact</Link>
  );
}

function ContactPage() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  
  const email = searchParams.get('email'); // query의 key값을 이용
  const address = searchParams.get('address');
  
  return (
    <PageLayout header='Contact Page'>
      <em>{email}</em>
      <br />
      <strong>{address}</strong>
    </PageLayout>
  );
}

• URL의 query string 정보를 활용해 앱을 구성할 수 있다.

• URLSearchParamsAPI, useLocation을 활용한다.