리액트에서 라우터 사용하기 (react-router-dom)

웹개발을 하다보면 절대 빼놓을 수 없는 라우터!

라우터를 사용하기 위해서 react-router-dom 라이브러리를 사용해야한다.

 

index.js

import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

import "./index.css";
import App from "./App_router_practice";

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

최 상위 컴포넌트인 <App> 컴포넌트를 <BrowserRouter> 컴포넌트로 감싸주어야 한다.

 

App.js

import { Route, Switch, Redirect } from "react-router-dom";
import Layout from "./components_router_practice/layout/Layout";
import AllQuotes from "./components_router_practice/pages/AllQuotes";
import NewQuote from "./components_router_practice/pages/NewQuote";
import NotFound from "./components_router_practice/pages/NotFound";
import QuoteDetail from "./components_router_practice/pages/QuoteDetail";

function App() {
  return (
    <Layout>
      <Switch>
        <Route path="/" exact>
          <Redirect to="/quotes" />
        </Route>
        <Route path="/quotes" exact>
          <AllQuotes />
        </Route>
        <Route path="/quotes/:quoteId">
          <QuoteDetail />
        </Route>
        <Route path="/new-quote">
          <NewQuote />
        </Route>
        <Route path="*">
          <NotFound />
        </Route>
      </Switch>
    </Layout>
  );
}

export default App;

<Switch>를 사용하여 각각 <Router> 컴포넌트를 묶어주면 Router컴포넌트에 설정한 path에 따라 페이지를 이동할 수 있다.

그런데 위에서부터 훑으면서 일치하는 것이 있으면 바로 이동하기 때문에 필요에따라 exact 를 넣어주어야 한다.

만약 path가 "/"인데 exact를 안넣어주면 어떤 url을 넣어도 무조건 "/"로 가기 때문이다. (/로 시작하지 않는 url은 없으니....)

 

리다이렉트 <Redirect>

위 App.js 코드 13번째줄에 보면 <Redirect> 컴포넌트가 있다.

이는 말 그대로 to="경로" 로 리다이렉트 하라는 뜻의 컴포넌트이다.

 

25번째줄 <NotFound> 컴포넌트는 커스텀 컴포넌트인데, Route로 지정해주지 않은 모든 path에 대하여 NotFound로 가게끔 만들었다. Redirect로 해도 된다. 

 

 

<Link>, <NavLink> 컴포넌트

import { NavLink } from "react-router-dom";

import classes from "./MainHeader.module.css"

const MainHeader = () => {
  return (
    <header className={classes.header}>
      <nav>
        <ul>
          <li>
            <NavLink activeClassName={classes.active} to="/welcome">Welcome</NavLink>
          </li>
          <li>
            <NavLink activeClassName={classes.active} to="/products">Products</NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default MainHeader;

Link 컴포넌트는 쉽게말해 a tag라고 생각해도 좋다.

어차피 실제 브라우저에 떴을 때에 a tag로 생성되기 때문이다.

NavLink 컴포넌트는 activeClassName 속성을 활용하여, 해당 링크를 들어갔을 때에 active되면 어떤 스타일을 적용할 것인지 나타난다.

 

위 그림에서 보듯이 메인 헤더에서 메뉴를 누르면 지금 어떤 메뉴에 들어와있는지 쉽게 알 수 있다.

activeClassName으로 스타일을 지정해주었기 때문이다.

 

그냥  Link를 사용하면 to="경로" 를 지정해주면 된다.