React Ch 4. React Router (5) ~ (8)

05. JSX 링크로 라우팅 이동하기 (I)

그동안 사용했던 a태그는 리엑트 브라우저에서 사용하기에 적합하지 않음
=> 리엑트에서는 Link 컴포넌트 사용

(1) Link 컴포넌트

function App() {
  return (
    <BrowserRouter>
      <Link to="/">Home</Link>
      <Switch>
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile" component={Profile} />
        <Route path="/about" component={About} />
        <Route path="/" exact component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

=> 서버로부터 새로운 파일을 가져오려고 하지 않음
=> 이전에 다운받음 app 중에서 페이지 제공

(2) Link 컴포넌트 응용

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

export default function Links() {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/profile">Profile</Link>
      </li>
      <li>
        <Link to="/profile/1">Profile/1</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/about?name=mark">About>name=mark</Link>
      </li>
    </ul>
  );
}

=> a 태그로 변환됨

06. JSX 링크로 라우팅 이동하기 (II)

(1) NavLink 컴포넌트

• import { NavLink } from 'react-router-dom'
• activeCLassName, activeStyle처럼 active 상태에 대한 스타일 지정 가능
• Route의 path처럼 동작하기 떄문에 exact가 있음
• Link와 비슷함

• components/NavLinks.jsx

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

const activeStyle = { color: "green" };

export default function NavLinks() {
  return (
    <ul>
      <li>
        <NavLink to="/" exact activeStyle={activeStyle}>
          Home
        </NavLink>
      </li>
      <li>
        <NavLink to="/profile" exact activeStyle={activeStyle}>
          Profile
        </NavLink>
      </li>
      <li>
        <NavLink to="/profile/1" activeStyle={activeStyle}>
          Profile/1
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about"
          activeStyle={activeStyle}
          isActive={(match, location) => {
            console.log(location);
            return match !== null && location.search === "";
          }}
        >
          About
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about?name=mark"
          activeStyle={activeStyle}
          isActive={(match, location) => {
            console.log(location);
            return match !== null && location.search === "?name=mark";
          }}
        >
          About?name=mark
        </NavLink>
      </li>
    </ul>
  );
}

=> activeStyle, activeClassName을 지정할 수 있다는 것이 Link와의 가장 큰 차이점
=> 변수로 미리 스타일 지정
=> 상위 링크에는 exact 명시해야 함
=> 옵셔널된 주소 같은 경우는 isActive 함수를 사용해서 파악해야 함

07. JS 로 라우팅 이동하기

(1) props.history.push()

• pages/Login.jsx

export default function Login(props) {
  console.log(props);
  function login() {
    setTimeout(() => {
      // 페이지를 이동
      props.history.push("/");
    }, 1000);
  }

  return (
    <div>
      <h2>Login 페이지 입니다.</h2>
      <button onClick={login}>로그인하기</button>
    </div>
  );
}

=> 리엑트 파일이 간단할 때 사용하기 좋음
=> props 잘 모르겠슴

리액트 파일이 복잡하면?!?

• component/LoginButton.jsx

export default function LoginButton(props) {
  console.log(props);
  function login() {
    setTimeout(() => {
      props.history.push("/");
    }, 1000);
  }
  return <button onClick={login}>로그인하기</button>;
}

• pages/Login.jsx

import LoginButton from "../components/LoginButton";

export default function Login(props) {
  return (
    <div>
      <h2>Login 페이지 입니다.</h2>
      <LoginButton {...props} />
    </div>
  );
}

=> 로그인 바로 밑에 있는 버튼이여서 쉬운거임
=> 더 아래에 버튼이 있다면 중간에 사용하지 않고 위에서 받은 props를 계속 내려줘야 함
=> 지양하는 방법

(2) 추천방법

방법1 - withRouter

• component/LoginButton.jsx

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

export default withRouter(function LoginButton(props) {
  console.log(props);
  function login() {
    setTimeout(() => {
      props.history.push("/");
    }, 1000);
  }
  return <button onClick={login}>로그인하기</button>;
});

• pages/Login.jsx

import LoginButton from "../components/LoginButton";

export default function Login() {
  return (
    <div>
      <h2>Login 페이지 입니다.</h2>
      <LoginButton />
    </div>
  );
}

방법2 - hook

담에 알려쥼

08. Redirect

• 기본문법

import { Redirect } from 'react-router-dom';
// jsx
<Redirect to="/" />