react-router-dom

Siwoo Pak·2021년 6월 7일
0

React

목록 보기
7/14

1. BrowserRouter

  • HTML5의 history API를 활용하여 ui를 업데이트함.
  • HashRouter URL의 hash를 활용한 라우터로 정적인 페이지에 적합함
  • 보통 req와 res로 이루어지는 동적인 페이지를 제작하므로 BrowserRouter가 보편적

2. Switch

  • 경로의 충돌이 일어나지 않게 Route들을 관리
  • Switch 내부에 Route들을 넣으면 요청에 의해 매칭되는 Route들이 다수 있을 때에 제일 처음 매칭되는 Route만 선별하여 실행.
  • 충돌 오류 방지 및, 경로 간에 이동 시 발생할 수 있는 충돌도 방지
  • 경로와 매칭되는 Route가 없을 때에 맨 밑에 default Route의 실행이 보장됨.(path 속성을 명시하지 않는 Route)

3. Route

  • 요청받은 경로명에 해당하는 컴포넌트를 렌더링함.
  • 링크를 생성.
import React from "react";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <h1>App</h1>
      <BrowserRouter>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/board">Board</Link>
          </li>
          <li>
            <Link to="/pic">Picture</Link>
          </li>
        </ul>
        <Switch>
          <Route exact path="/" component={Home}></Route>
          <Route path="/board" component={Board}></Route>
          <Route path="/pic" component={Picture}></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

function Home() {
  return <div>Home component</div>;
}

function Board() {
  return <div>Board component</div>;
}

function Picture() {
  return <div>Picture component</div>;
}

export default App;
  • Link 컴포넌트에 style 속성이 추가된 것.
  • 속성에는 activeClassName, activeStyle 등이 있음
<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  FAQs
</NavLink>

6. useHistory 사용 해서 History 객체 접근 가능

const history = useHistory();
function back() {
	return history.goBack();
}

Router에 연결되어있지 않다면 withRouter안에 넣어줘야 props 접근이 가능하고 props로 History 접근 가능

import {WithRouter} from 'react-router-dom'

function Add = (props) => {
 function back() {
 	return props.history.goBack();
 }
}
export defalut WithRouter(Add);



Tip

  • react-router-dom은 웹에서 쓰는 컴포넌트
  • react-router-native는 앱에서 쓰는 컴포넌트
  • react-router는 위의 둘을 합친 패키지.
profile
'하루를 참고 인내하면 열흘을 벌 수 있고 사흘을 참고 견디면 30일을, 30일을 견디면 3년을 벌 수 있다.'

0개의 댓글