리액트 // URL파라미터 받기

 

참고사이트

함수형

https://pro-self-studier.tistory.com/76

1. Route 와 파라미터, 쿼리

 

클래스형

https://gongbu-ing.tistory.com/44

React | Router : URL로 parameter 전송하기

 

 

--------------

 

Nav.js

import React from "react";
import { Link } from "react-router-dom";

const Nav = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about/1">어바웃</Link>
        </li>
        <li>
          <Link to="/profile">프로필</Link>
        </li>
      </ul>
    </div>
  );
};

export default Nav;

 

링크를 걸 네비게이션 바에서 /about/1 로 임의로 1을 넘겨주었다

 

 App.js

import React, { Component } from "react";
import Home from "./page/Home";
import About from "./page/About";
import Profile from "./page/Profile";
import Nav from "./components/Nav";
import { Route } from "react-router-dom";

// exact={true} 는 정확히 주소가 맞아야먄 나오도록 할 수 있다.
class App extends Component {
  render() {
    return (
      <div>
        <Nav />
        <hr />
        <Route path="/" component={Home} exact={true} />
        <hr />
        <Route path="/about/:num" component={About} />
        <hr />
        <Route path="/profile" component={Profile} />
      </div>
    );
  }
}

export default App;

 

Route 시킬 component를 About으로 세팅하고, path="/about/:num"과 같이 변수명을 num으로 지정해준다.

 

About.js

import React from "react";

const About = ({match}) => {
  return (
    <div>
      <h1>ABOUT 페이지 입니다. {match.params.num}</h1>
    </div>
  );
};

export default About;

 

About 함수형 컴포넌트에서 매개변수에 {match}를 적어주고 리턴할 내용에 {match.params.변수명}을 적어주면 입력된다.