Router Props

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

브라우저와 리액트앱의 라우터를 연결하게 되면 그 결과 라우터가 history api에 접근할 수 있게 되며 각각의 Route와 연결된 컴포넌트에 props로 match, location, history라는 객체를 전달하게 된다.

import { React } from 'react';
import Header from 'components/Header';

import './MyPiscineView.scss';

const MyPiscineView = ({ props }) => {
  console.log(props.history);
  console.log(props.location);
  console.log(props.match);

  const index = props.match.params.index.substring(0, 3);
  return (
    <div className="mypiscine-container">
      <Header />
      <div className="body">
        <h1>각 과제에 대한 페이지</h1>
        {index}에 대한 정보를 불러올 것.
      </div>
    </div>
  );
};

export default MyPiscineView;

History

브라우저의 history와 유사한데, 스택(stack)에 현재까지 이동한 url 경로들이 담겨있는 형태로 주소를 임의로 변경하거나 되돌아갈 수 있도록 해준다.

location

location 객체에는 현재 페이지의 정보를 가지고 있다. 대표적으로 location.search로 현재 url의 쿼리 스트링을 가져올 수 있다.

Match

match 객체에는 와 URL이 매칭된 대한 정보가 담겨져있다. 대표적으로 match.params로 path에 설정한 파라미터값을 가져올 수 있다.

Link로 props를 전달하는 법

https://dsc-sookmyung.tistory.com/41
https://ghur2002.medium.com/react-router를-이용하여-component간에-props-넘겨주기-610de3511c67
https://rrecoder.tistory.com/101
https://gongbu-ing.tistory.com/45

// Route.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import {
  MyPiscine,
  RegisterPiscine,
  MyPiscineView,
} from 'pages';

const Routes = () => {
  return (
    <Router>
      <Switch>

        <Route exact path="/myPiscine/:index" component={MyPiscine} />
        <Route exact path="/myPiscine/view/:index" component={MyPiscineView} />
        <Route
          exact
          path="/registerPiscine/:index"
          component={RegisterPiscine}
        />
      </Switch>
    </Router>
  );
};

export default Routes;

//MyPiscine.js
import { React } from 'react';
import Header from 'components/Header';
import { Link } from 'react-router-dom';

import './MyPiscine.scss';

const MyPiscine = ({ match }) => {
  const index = match.params.index.substring(0);
  const dummy = ['11', '22', '33'];
  return (
    <div className="mypiscine-container">
      <Header />
      <div className="body">
        <h1>Git Branch Piscine</h1>
        <h2>sdfaksfljdsalkfjdas sdfjlaksdfjasldfj sdfjksda!</h2>
        {index}번째 피신을 선택 현재 피신에 대한 정보를 API든 뭐든 요청.
        {dummy.map((e, i) => {
          const url = `/myPiscine/view/${index}-${i}`;
          return (
            <Link to={url} className="dummy">
              <div>{e}</div>
            </Link>
          );
        })}
      </div>
    </div>
  );
};

export default MyPiscine;

<Link to="/">를 이용하면 URL를 이동할 수 있는데, URL 뒤에 :name로 원하는 정보를 파라미터로 전달할 수 있다. 해당 파라미터는 URL에 지정된 컴포넌트에서 match.params에 객체 형태로 저장되어 있다.

// MyPiscine.js
import { React } from 'react';
import Header from 'components/Header';
import { Link } from 'react-router-dom';

import './MyPiscine.scss';

const MyPiscine = ({ match }) => {
  const index = match.params.index.substring(0);
  const dummy = ['11', '22', '33'];
  return (
    <div className="mypiscine-container">
      <Header />
      <div className="body">
        <h1>Git Branch Piscine</h1>
        <h2>sdfaksfljdsalkfjdas sdfjlaksdfjasldfj sdfjksda!</h2>
        {index}번째 피신을 선택 현재 피신에 대한 정보를 API든 뭐든 요청.
        {dummy.map((e, i) => {
          const url = `/myPiscine/view/${index}-${i}`;
          return (
            <Link
              to={{
                pathname: url,
                state: {
                  title: '제목',
                  name: '이름',
                  body: '본문',
                },
              }}
            >
              <div>{e}</div>
            </Link>
          );
        })}
      </div>
    </div>
  );
};

export default MyPiscine;

//MyPiscineView.js

import { React } from 'react';
import Header from 'components/Header';

import './MyPiscineView.scss';

const MyPiscineView = ({ history, location, match }) => {
  console.log(history);
  console.log(location);
  console.log(match);

  const index = match.params.index.substring(0, 3);
  return (
    <div className="mypiscine-container">
      <Header />
      <div className="body">
        <h1>각 과제에 대한 페이지</h1>
        {index}에 대한 정보를 불러올 것.
      </div>
    </div>
  );
};

export default MyPiscineView;

이 때 Link의 to에 주소 뒤에 가변인자를 붙이는 게 아니라 객체 형태로 확장해서 사용하는 것으로 props를 전달하는 것도 가능하다. 이렇게 state로 전달된 값은 location.state에 저장된다.

link로 쿼리스트링을 전달하는 법

https://justmakeyourself.tistory.com/entry/querystring-path-of-react-router
https://velog.io/@wiostz98kr/TIL51-l-React-Router-3탄

쿼리스트링은 ?로 시작한다는 것을 알리고 속성=값 형태로 명시하고 여러개가 있을 경우 & 로 구분한다.

쿼리스트링과 Link to의 URL :파라미터 는 엄연히 다르다!

import queryString from "query-string";

//나머지 부분은 같습니다.

const Home = ({ match, location }) => {
  console.log("Match");
  console.dir(match);
  console.log("Location");
  console.log(location);

  const query = queryString.parse(location.search);

  return (
    <h1>
      Home! Welcome {match.params.name} am {query.age} !
    </h1>
  );
};

전달된 쿼리스트링은 location.search에 저장된다.

query-string 을 이용해서 객체 형태로 파싱할 수 있다.