[React] router / react-router-dom / query-string / redirect

먼저 프로젝트 내에 Pages라는 폴더를 생성하고, 

Home , About , Profile, NotFound 등 jsx파일을 추가한다.

 

// Home.jsx

export default function Home() {
  return <div>Home 페이지입니다.</div>;
}

 

App.js 파일에서 react-router-dom 에서 browserRouter, Redirect, Route, Switch, Link 를 import 한다.

또한 이동시킬 페이지들을 모두 import한다.

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

    // App.js 의 App return 내부
    
    <BrowserRouter>
      <Links />
      <NavLinks />
      <Switch>
        <Route
          path="/login2"
          render={() => (isLogin ? <Redirect to="/" /> : <Login />)}
        />
        <Route path="/login" component={Login} />
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile" exact component={Profile} />
        <Route path="/about" component={About} />
        <Route path="/" exact component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>

• 코드를 확인해보면  Route path 에 profile이 두 가지 버전이 있다.
  • /profile/:id -  profile컴포넌트에서 props로 id값을 받아 올 수 있다.
• Route path의 / 다음 exatc는 경로가  정확하게 일치할 때만 이동한다는 의미
  • 위의 코드에서 /profile에 exact를 생략한다면 /profile/:id와 /profile 두 가지가 동시에 출력되게 된다.
• 페이지를 찾지 못할 땐 path 를 생략하고 NotFound컴포넌트
• NavLink는 특정 메뉴가 선택되어있을 때 메뉴를 activeStyle을 활성화해줄 수 있다.
• redirect - login2 처럼 isLogin의 값이 true 인지 false에 따라서 경로를 변경할 수 있다.

 

• Liks - JSX링크로 라우팅 이동하기. A태그를 대신해서 React-router-dom에서 제공하는 기능
• NavLinks - 네비게이션 링크. Link와 설정 방법 동일하다.
  • activeStyle: 활성화되었을 때 스타일 부여
  • isActive: match와  location을 인자로 받아와 값에 따라 활성화시킬 수 있음
• Switch

 

• Query-string

 $ npm i query-string -S

// About.jsx

export default function About(props) {
  const searchParams = props.location.search;
  const obj = new URLSearchParams(searchParams);
  const query = queryString.parse(searchParams);
  
  return (
    <div>
      <h1>About 페이지입니다.</h1>
      {query.name && <p>이름은 {query.name}입니다.</p>}
    </div>
  );
}