react-router-dom 사용하기 (Redirect, Switch, NavLink, useHistory)

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

import AllQuotes from "./pages/AllQuotes";
import QuoteDetail from "./pages/QuoteDetail";
import NewQuote from "./pages/NewQuote";

function App() {
  return (
    <>
    <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>
    </Switch>
    </>
  );
};

export default App;

Switch는

자식들 중에 처음으로 조건이 만족하는 하나의 컴포넌트만 출력하게 하기 때문에

정확한 주소로 넘어갈 때에 path뒤에 exact를 붙여주면 됨. 

Redirect 같은 경우에는 처음에 path = "/"해서 기본 메인을 정할 때 Redirect로 정해진 곳으로 바로 이동할 수 있게 함.

 

import classes from "./MainNavigation.module.css";
import {NavLink} from "react-router-dom";

const MainNavigation = () =>{

  return(
    <header className={classes.header}>
      <div className={classes.logo}>Great Quotes</div>
      <nav className={classes.nav}>
        <ul>
          <li>
            <NavLink to ='/quotes' activeClassName={classes.active}>
              All Quotes
            </NavLink>
          </li>
          <li>
            <NavLink to ='/new-quote' activeClassName={classes.active}>
              Add a Quote
            </NavLink>
          </li>
        </ul>
      </nav>
    </header>
  )
};

export default MainNavigation;

<Link>와 비슷하지만 <NavLink>를 사용하면 링크가 활성화 되었을때, 스타일을 적용할 때 activeStyle값을 props로 넣어주면 된다. 

 

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>
  );
};

페이지를 찾을 수 없을때 처리 

path ="*"은 맨 마지막에 와야함 . 

모든 주소를 확인해도 일치하지 않을 때 출력함.

 

import {useHistory} from "react-router-dom";
import QuoteForm from "../components/quotes/QuoteForm";

const NewQuote = () => {
  const history = useHistory();

  const addQuoteHandler = quoteData => {
    console.log(quoteData);

    history.push('/quotes');

  };

  return(
  <QuoteForm onAddQuote={addQuoteHandler}/>
  )
};

export default NewQuote;

history 객체를 사용하면 위처럼 원하는 곳으로 이동도 가능하고 메세지박스 또한 가능하다.

useLocation 위치 객체에 대한 액세스를 제공.(현재 로드된 url에 대하여 알려줌)

 

URLSearchParams <- 기본 JavaScript 생성자 함수 브라우저에서 사용가능.

 

import {Prompt} from 'react-router-dom';