react-router-dom

* https://velog.io/@josworks27/react-router-dom-history를 참고하였습니다.

*  https://blog.naver.com/PostView.nhn?blogId=backsajang420&logNo=221158623399

 

1.라우팅 이란?

사용자가 어떤 주소(URL)로 들어갔을때, 그 주소에 해당하는 페이지를 사용자에게 보내주는 것이다.

 

2.BROWSER ROUTER

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

 

react-router-dom 을 적용시키고 싶은 최상위 컴포넌트에 감싸주는 wrapper component이다.

 

ReactDom.render(
	<BrowserRouter> 
    		<App/>
    	</BrowserRouter>, 
    document.getElementById('root'))

3.ROUTE

 <Route exact path="/" component={Login} />
 <Route path="/Home" component={Home} />

첫번째 Route안에 exact가 없다면 /를포함하고있는 /Home 또한 출력된다.

 

4.SWITCH

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

// 방법 1
<Switch>
 <Route exact path="/"><Login></Login><Route>
 <Route path="/Home"><Home></Home><Route>
 <Route path="/">Not Found<Route>
<Switch>

// 방법 2
<Switch>
 <Route exact path="/" component={Login}/>
 <Route path="/Home"   component={Home} />
 <Route compoenent={NotFound}/>
<Switch>

IF ELSE 기능과 유사하다. 일치하는 ROUTE가 없으면 가장 마지막 ROUTE를 보여준다.

 

5.LINK

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

<Link to="/"> ** </Link

페이지를 새로고침 하지 않고 라우팅 해준다.

 

6.NAVLINK

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

<NavLink to="/" className="normal" activeClassName="active"> ** </NavLink>

조금 특별한 <Link>이다. 'to'에 지정한 path와 URL이 매칭되는 경우,

 

특별한 스타일, 클래스를 적용할 수 있다.

 

7.HISTORY

리액트에서 페이지를 이동할 수 있는 이유는 react-router-dom을 이용하여 페이지의 기록을 알 수 있기 때문이다.

 

아래 샘플 코드의 App.js에서와 같이 Router로 컴포넌트의 Path와 라우팅할 컴포넌트를 정해줄 수 있는데,

 

해당하는 라우터는 props를 통해 history 객체를 전달받게 된다.

 

history 객체를 콘솔로 찍어보면 아래와 같이 goBack(), goForward() 등

 

앞/뒤로 이동할 수 있는 메소드 뿐만 아니라 다양한 메소드와 관련 객체들이 존재한다.

 

이 중 라우팅 변경을 위해 가장 빈번히 사용되는 메소드가 push()인데,

 

history.push('이동하고자 하는 path') 를 통해  원하는 컴포넌트로 이동이 가능하다.

 

{length: 2, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
action: "PUSH"
block: ƒ block(prompt)
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 2
listen: ƒ listen(listener)
location: {pathname: "/about", search: "", hash: "", state: undefined, key: "mlmosl"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)
__proto__: Object

 

// src/App.js

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route exact path={"/"} component={Home} />
          <Route path={"/about"} component={About} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

// src/Home.js

import React from "react";

function Home({ history }) {
  return (
    <div>
      <button onClick={() => history.push('/about')}>about으로 이동</button>
    </div>
  );
}

export default Home;

 

// src/About.js

import React from "react";

function About({ history }) {
  console.log(history);
  return (
    <div>
      <button onClick={() => history.push("/")}>home으로 이동</button>
    </div>
  );
}