라우팅

라우팅이란 쉽게말해서 페이지를 돌아다니는 것이다.

 

 

일단 패키지를 하나 선택해서 인스톨하자!

www.npmjs.com/package/react-router-dom

react-router-dom

 

yarn add react-router-dom으로 설치!

 

아래 코드로 import

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

 

아래코드 index.js에 추가

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

 

 

라우트 사용방법 두 가지

• Route 사용방법 1: 넘겨줄 props가 없을 때<Route path="주소[/home 처럼 /와 주소를 적어요]" component={[보여줄 컴포넌트]}/>
• Route 사용방법 2: 넘겨줄 props가 있을 때(우리 버킷리스트 앱은 App.js에서 list를 props로 넘겨주죠! 그럴 땐 이렇게 쓰면 됩니다!)<Route path="주소[/home 처럼 /와 주소를 적어요]" render={(props) => (<BucketList list={this.state.list} />)} />

라우트 index.js

아래코드를 index.js에 붙여넣자

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

URL 파라미터란??

 

• 웹사이트 주소에는 파라미터와 쿼리라는 게 있어요. 우리는 그 중 파라미터 사용법을 알아볼 거예요!
• 이렇게 생겼어요! → 파라미터: /cat/nabi → 쿼리: /cat?name=nabi

 <Route exact path="/" component={Home} />
        <Route path="/cat/:cat_name" component={Cat} /> // 이렇게 props를 준다
        <Route path="/dog" component={Dog} /> 
        
        
        ///////////////////////////////////////////////////
        
        
import React from "react";

const Cat = (props) => {
  console.log(props.match);
  return <div>내 고양이 이름은 {props.match.params.cat_name} 이예요</div>; // props를 이렇게 받을 수 있다
  // 그리고 주소맨 뒤 / 뒤에 써지는 값이 고양이 이름이 된다
};

export default Cat;

그리고 Link란 것이 있다 간단히 말해 html의 a태그와 비슷하다

 

   <div>
          <Link to="/">Home으로 가기</Link>
          <Link to="/cat/nabi">Cat으로 가기</Link>
          <Link to="/dog">Dog으로 가기</Link>
        </div>

Link 말고 history를 이용하는 방법도 있다

        <button
          onClick={() => {
            this.props.history.push("/cat/nabi");
          }}
        >
          /cat으로 가기
        </button>
        <button
          onClick={() => {
            this.props.history.goBack();
          }}
        >
          뒤로 가기
        </button>

 

라우팅 기본 코드 App.js

import React from "react";
import "./App.css";
import { render } from "react-dom";
import { Route, Link } from "react-router-dom";
import { withRouter } from "react-router";

import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  componentDidMount() {
    console.log(this.props);
  }

  render() {
    return (
      <div className="App">
        <div>
          <Link to="/">Home으로 가기</Link>
          <Link to="/cat/nabi">Cat으로 가기</Link>
          <Link to="/dog">Dog으로 가기</Link>
        </div>
        <Route exact path="/" component={Home} />
        <Route path="/cat/:cat_name" component={Cat} />
        <Route path="/dog" component={Dog} />

        <button
          onClick={() => {
            this.props.history.push("/cat/nabi");
          }}
        >
          /cat으로 가기
        </button>
        <button
          onClick={() => {
            this.props.history.goBack();
          }}
        >
          뒤로 가기
        </button>
      </div>
    );
  }
}

export default withRouter(App);

Cat.js

import React from "react";

const Cat = (props) => {
  console.log(props.match);
  return <div>내 고양이 이름은 {props.match.params.cat_name} 이예요</div>; // props를 이렇게 받을 수 있다
  // 그리고 주소맨 뒤 / 뒤에 써지는 값이 고양이 이름이 된다
};

export default Cat;