라우팅(페이지) 이동: Link, NavLink, Redirect

react-router-dom을 이용해 라우팅 이동하기

Link

<a href="/">Home</a>

-a tag: 앱을 새로고침하면서 경로를 이동합니다.

<Link to="/">Home</Link>

-브라우저의 주소를 바꾸고,맞는 Route 로 화면을 변경합니다.
-import { Link } from 'react-router-dom'; 한다.

import { BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './pages/Home';
import Profile from './pages/Profile';
import About from './pages/About';
import NotFound from './pages/NotFound';
import Links from './components/Links';
import NavLinks from './components/NavLinks';

function App() {
  return (
    <BrowserRouter>
      <Links />
      <NavLinks />
      <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>
  );
}

export default App;
//./components/Links.jsx
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>
  );
}

NavLink

-activeClassName, activeStyle 처럼 active 상태에 대한 스타일 지정이 가능합니다.
-Route 의 path 처럼 동작하기 때문에 exact 가 있습니다.

//./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) =>
            match !== null && location.search === ""
          }
        >
          About
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about?name=mark"
          activeStyle={activeStyle}
          isActive={(match, location) =>
            match !== null && location.search === "?name=mark"
          }
        >
          About?name=mark
        </NavLink>
      </li>
    </ul>
  );
}

-match !== null 을 해주는 이유는 match 객체가 지정된 match 즉 about이 아닐 경우 null 이 들어가고 about 일 경우 객체가 들어가는데 이 확인이 없다면 location의 정보만 갖고 active처리가 되어 버린다.

Redirect

const isLogin = true;....
<Route path="/login"
       render={() => (isLogin ? <Redirect to="/" /> : <Login />)}
        />

Redirect가 render되면 to가 가리키는 방향으로 redirect 한다.

JS 로 라우팅 이동하기

// src/pages/Login.jsx
import LoginButton from '../components/LoginButton';
export default function Login() {
  return (
    <div>
      <h2>Login 페이지 입니다.</h2>
      <LoginButton />
    </div>
  );
}
// src/components/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>;
});

-props.history.push("/");을 이용해 js 형식으로 홈으로 페이지를 이동 할 수 있다.
-function을 다른 파일로 처리 없이 분리할 경우 props의 history가 넘어 오지 않기 때문에 이를 해결하기 위해서는 두가지 방법이 있다.
. . . 1. Higher Order Component: LoginButton.jsx 수정

// src/components/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>;
});

. . . 2. Login.jsx를 수정

// src/pages/Login.jsx
import LoginButton from '../components/LoginButton';
export default function Login(props) {
  return (
    <div>
      <h2>Login 페이지 입니다.</h2>
      <LoginButton {...props}/>
    </div>
  );
}