🚨React-router-dom v6로 바뀌면서 달라진 점 정리

react-router-dom이 v6으로 업그레이드 되었습니다 :) v5와 다른 점이 몇 가지 있으니 꼭 숙지하시기 바랍니다. 안그럼 아무것도 실행되지 않을지도....

velopert님의 영상을 토대로 정리한 블로그 글입니다.동영상으로 보실분들은 velopert님의 유튜브 영상을 시청해주세요!React Router v6가 정식으로 릴리즈 되었다. 공식문서그 동안 사용했던 React Router의 문법이 조금 바뀌었는데v5문법에 많이

React 홈으로 돌아가기

React.js

메인으로 돌아가기

영어를 잘하는 사람은 공식 문서 확인!

Switch 대신 Routes로

Switch 대신 Routes를 사용해야한다.

exact 옵션이 사라졌다. 이제는 항상 exact 옵션을 적용받는다.

Route는 항상 Routes 직속으로 둘러쌓여야 한다.

기존코드

<Switch>
  <Route path="/" ..... />
</Switch>

바뀐코드

<Routes>
  <Route path="/" .....  />
</Routes>

Route children이나 component가 사라지고 element사용

기존코드

<Route path="/" exact component={HomePage} />
<Route path="/login" exact>
    <LoginPage />
</Route>

바뀐코드

<Route path="/" exact element={<HomePage />} />
<Route path="/login" exact element={<LoginPage />} />

서브 경로가 필요한 경우 *를 사용

기존코드

<Route path="/users/:username" component={UsersPage} />

바뀐코드

<Route path="/users/:username/*" element={<UsersPage />} />

NavLink에 activeStyle, activeClassName 삭제

기존코드

<NavLink to="/messages" style={{ color: "blue"}} activeStyle={{ color: "green"}}>
    Messages
</NavLink>

<NavLink to="/messages" className="nav-link" activeClassName="activated">
    Messages
</NavLink>

바뀐코드

<NavLink to="/messages" style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}>
  Messages
</NavLink>

<NavLink to="/messages" className={({ isActive }) => "nav-link" + (isActive ? " activated" : "") }>
    Messages
</NavLink>

pathname 가져와 styled-components와 결합하는 useLocation

아래 코드와 같이 useLocation Hook을 사용하여 pathname을 받아올 수 있습니다.

import React from "react";
import { Link, useLocation } from "react-router-dom";
import styled from "styled-components";

const HeaderWrapper = styled("header")`
  margin-bottom: 30px;
`;
const List = styled("ul")`
  display: flex;
`;
const Item = styled("li")`
  margin-right: 20px;
  text-transform: uppercase;
  font-weight: 600;
  color: ${(props) => (props.selected ? "white" : "black")};
  background-color: ${(props) => (props.selected ? "#f1c40f" : "white")};
`;

const Header = () => {
  const { pathname } = useLocation();
  return (
    <HeaderWrapper>
      {/* header 태그 */}
      <List>
        {/* ul 태그 */}
        <Item selected={pathname.startsWith("/web")}>
          {/* li 태그 */}
          <Link to="/web">Go to Web</Link>
        </Item>
        <Item selected={pathname === "/design"}>
          <Link to="/design">Go to Design</Link>
        </Item>
        <Item selected={pathname === "/server"}>
          <Link to="/server">Go to Server</Link>
        </Item>
      </List>
    </HeaderWrapper>
  );
};

export default Header;

useParams로 :id path를 이용하기

useParams Hook을 이용하여 :id 값을 받아옵니다.

// WebPost.js

import React from "react";
import { useParams } from "react-router";

const WebPost = () => {
  const { id } = useParams();
  return <div>#{id}번째 포스트</div>;
};

export default WebPost;

useHistory 삭제, useNavigate로 병합

useHistory로 기존의 useHistory 기능을 전부 대체

useHistory는 객체였지만 useNavigate는 함수이다.

기존코드

const history = useHistory();

history.push('/');
history.goback();
history.go(-2);
history.push(`/user/${user._id}`);

바뀐코드

const navigate = useNavigate();

navigate('/');
navigate(-1);
navigate(-2);
navigate(`/user/${user._id}`);

출처

react-router-dom이 v6으로 업그레이드 되었습니다 :) v5와 다른 점이 몇 가지 있으니 꼭 숙지하시기 바랍니다. 안그럼 아무것도 실행되지 않을지도....

React 홈으로 돌아가기

React.js

메인으로 돌아가기

영어를 잘하는 사람은 공식 문서 확인!

Switch 대신 Routes로

Switch 대신 Routes를 사용해야한다.

exact 옵션이 사라졌다. 이제는 항상 exact 옵션을 적용받는다.

Route는 항상 Routes 직속으로 둘러쌓여야 한다.

기존코드

<Switch>
  <Route path="/" ..... />
</Switch>

바뀐코드

<Routes>
  <Route path="/" .....  />
</Routes>

Route children이나 component가 사라지고 element사용

기존코드

<Route path="/" exact component={HomePage} />
<Route path="/login" exact>
    <LoginPage />
</Route>

바뀐코드

<Route path="/" exact element={<HomePage />} />
<Route path="/login" exact element={<LoginPage />} />

서브 경로가 필요한 경우 *를 사용

기존코드

<Route path="/users/:username" component={UsersPage} />

바뀐코드

<Route path="/users/:username/*" element={<UsersPage />} />

NavLink에 activeStyle, activeClassName 삭제

기존코드

<NavLink to="/messages" style={{ color: "blue"}} activeStyle={{ color: "green"}}>
    Messages
</NavLink>

<NavLink to="/messages" className="nav-link" activeClassName="activated">
    Messages
</NavLink>

바뀐코드

<NavLink to="/messages" style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}>
  Messages
</NavLink>

<NavLink to="/messages" className={({ isActive }) => "nav-link" + (isActive ? " activated" : "") }>
    Messages
</NavLink>

pathname 가져와 styled-components와 결합하는 useLocation

아래 코드와 같이 useLocation Hook을 사용하여 pathname을 받아올 수 있습니다.

import React from "react";
import { Link, useLocation } from "react-router-dom";
import styled from "styled-components";

const HeaderWrapper = styled("header")`
  margin-bottom: 30px;
`;
const List = styled("ul")`
  display: flex;
`;
const Item = styled("li")`
  margin-right: 20px;
  text-transform: uppercase;
  font-weight: 600;
  color: ${(props) => (props.selected ? "white" : "black")};
  background-color: ${(props) => (props.selected ? "#f1c40f" : "white")};
`;

const Header = () => {
  const { pathname } = useLocation();
  return (
    <HeaderWrapper>
      {/* header 태그 */}
      <List>
        {/* ul 태그 */}
        <Item selected={pathname.startsWith("/web")}>
          {/* li 태그 */}
          <Link to="/web">Go to Web</Link>
        </Item>
        <Item selected={pathname === "/design"}>
          <Link to="/design">Go to Design</Link>
        </Item>
        <Item selected={pathname === "/server"}>
          <Link to="/server">Go to Server</Link>
        </Item>
      </List>
    </HeaderWrapper>
  );
};

export default Header;

useParams로 :id path를 이용하기

useParams Hook을 이용하여 :id 값을 받아옵니다.

// WebPost.js

import React from "react";
import { useParams } from "react-router";

const WebPost = () => {
  const { id } = useParams();
  return <div>#{id}번째 포스트</div>;
};

export default WebPost;

useHistory 삭제, useNavigate로 병합

useHistory로 기존의 useHistory 기능을 전부 대체

useHistory는 객체였지만 useNavigate는 함수이다.

기존코드

const history = useHistory();

history.push('/');
history.goback();
history.go(-2);
history.push(`/user/${user._id}`);

바뀐코드

const navigate = useNavigate();

navigate('/');
navigate(-1);
navigate(-2);
navigate(`/user/${user._id}`);

출처

react-router-dom이 v6으로 업그레이드 되었습니다 :) v5와 다른 점이 몇 가지 있으니 꼭 숙지하시기 바랍니다. 안그럼 아무것도 실행되지 않을지도....

React 홈으로 돌아가기

React.js

메인으로 돌아가기

영어를 잘하는 사람은 공식 문서 확인!

Switch 대신 Routes로

Switch 대신 Routes를 사용해야한다.

exact 옵션이 사라졌다. 이제는 항상 exact 옵션을 적용받는다.

Route는 항상 Routes 직속으로 둘러쌓여야 한다.

기존코드

<Switch>
  <Route path="/" ..... />
</Switch>

바뀐코드

<Routes>
  <Route path="/" .....  />
</Routes>

Route children이나 component가 사라지고 element사용

기존코드

<Route path="/" exact component={HomePage} />
<Route path="/login" exact>
    <LoginPage />
</Route>

바뀐코드

<Route path="/" exact element={<HomePage />} />
<Route path="/login" exact element={<LoginPage />} />

서브 경로가 필요한 경우 *를 사용

기존코드

<Route path="/users/:username" component={UsersPage} />

바뀐코드

<Route path="/users/:username/*" element={<UsersPage />} />

NavLink에 activeStyle, activeClassName 삭제

기존코드

<NavLink to="/messages" style={{ color: "blue"}} activeStyle={{ color: "green"}}>
    Messages
</NavLink>

<NavLink to="/messages" className="nav-link" activeClassName="activated">
    Messages
</NavLink>

바뀐코드

<NavLink to="/messages" style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}>
  Messages
</NavLink>

<NavLink to="/messages" className={({ isActive }) => "nav-link" + (isActive ? " activated" : "") }>
    Messages
</NavLink>

pathname 가져와 styled-components와 결합하는 useLocation

아래 코드와 같이 useLocation Hook을 사용하여 pathname을 받아올 수 있습니다.

import React from "react";
import { Link, useLocation } from "react-router-dom";
import styled from "styled-components";

const HeaderWrapper = styled("header")`
  margin-bottom: 30px;
`;
const List = styled("ul")`
  display: flex;
`;
const Item = styled("li")`
  margin-right: 20px;
  text-transform: uppercase;
  font-weight: 600;
  color: ${(props) => (props.selected ? "white" : "black")};
  background-color: ${(props) => (props.selected ? "#f1c40f" : "white")};
`;

const Header = () => {
  const { pathname } = useLocation();
  return (
    <HeaderWrapper>
      {/* header 태그 */}
      <List>
        {/* ul 태그 */}
        <Item selected={pathname.startsWith("/web")}>
          {/* li 태그 */}
          <Link to="/web">Go to Web</Link>
        </Item>
        <Item selected={pathname === "/design"}>
          <Link to="/design">Go to Design</Link>
        </Item>
        <Item selected={pathname === "/server"}>
          <Link to="/server">Go to Server</Link>
        </Item>
      </List>
    </HeaderWrapper>
  );
};

export default Header;

useParams로 :id path를 이용하기

useParams Hook을 이용하여 :id 값을 받아옵니다.

// WebPost.js

import React from "react";
import { useParams } from "react-router";

const WebPost = () => {
  const { id } = useParams();
  return <div>#{id}번째 포스트</div>;
};

export default WebPost;

useHistory 삭제, useNavigate로 병합

useHistory로 기존의 useHistory 기능을 전부 대체

useHistory는 객체였지만 useNavigate는 함수이다.

기존코드

const history = useHistory();

history.push('/');
history.goback();
history.go(-2);
history.push(`/user/${user._id}`);

바뀐코드

const navigate = useNavigate();

navigate('/');
navigate(-1);
navigate(-2);
navigate(`/user/${user._id}`);

출처

react-router-dom이 v6으로 업그레이드 되었습니다 :) v5와 다른 점이 몇 가지 있으니 꼭 숙지하시기 바랍니다. 안그럼 아무것도 실행되지 않을지도....

React 홈으로 돌아가기

React.js

메인으로 돌아가기

영어를 잘하는 사람은 공식 문서 확인!

Switch 대신 Routes로

Switch 대신 Routes를 사용해야한다.

exact 옵션이 사라졌다. 이제는 항상 exact 옵션을 적용받는다.

Route는 항상 Routes 직속으로 둘러쌓여야 한다.

기존코드

<Switch>
  <Route path="/" ..... />
</Switch>

바뀐코드

<Routes>
  <Route path="/" .....  />
</Routes>

Route children이나 component가 사라지고 element사용

기존코드

<Route path="/" exact component={HomePage} />
<Route path="/login" exact>
    <LoginPage />
</Route>

바뀐코드

<Route path="/" exact element={<HomePage />} />
<Route path="/login" exact element={<LoginPage />} />

서브 경로가 필요한 경우 *를 사용

기존코드

<Route path="/users/:username" component={UsersPage} />

바뀐코드

<Route path="/users/:username/*" element={<UsersPage />} />

NavLink에 activeStyle, activeClassName 삭제

기존코드

<NavLink to="/messages" style={{ color: "blue"}} activeStyle={{ color: "green"}}>
    Messages
</NavLink>

<NavLink to="/messages" className="nav-link" activeClassName="activated">
    Messages
</NavLink>

바뀐코드

<NavLink to="/messages" style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}>
  Messages
</NavLink>

<NavLink to="/messages" className={({ isActive }) => "nav-link" + (isActive ? " activated" : "") }>
    Messages
</NavLink>

pathname 가져와 styled-components와 결합하는 useLocation

아래 코드와 같이 useLocation Hook을 사용하여 pathname을 받아올 수 있습니다.

import React from "react";
import { Link, useLocation } from "react-router-dom";
import styled from "styled-components";

const HeaderWrapper = styled("header")`
  margin-bottom: 30px;
`;
const List = styled("ul")`
  display: flex;
`;
const Item = styled("li")`
  margin-right: 20px;
  text-transform: uppercase;
  font-weight: 600;
  color: ${(props) => (props.selected ? "white" : "black")};
  background-color: ${(props) => (props.selected ? "#f1c40f" : "white")};
`;

const Header = () => {
  const { pathname } = useLocation();
  return (
    <HeaderWrapper>
      {/* header 태그 */}
      <List>
        {/* ul 태그 */}
        <Item selected={pathname.startsWith("/web")}>
          {/* li 태그 */}
          <Link to="/web">Go to Web</Link>
        </Item>
        <Item selected={pathname === "/design"}>
          <Link to="/design">Go to Design</Link>
        </Item>
        <Item selected={pathname === "/server"}>
          <Link to="/server">Go to Server</Link>
        </Item>
      </List>
    </HeaderWrapper>
  );
};

export default Header;

useParams로 :id path를 이용하기

useParams Hook을 이용하여 :id 값을 받아옵니다.

// WebPost.js

import React from "react";
import { useParams } from "react-router";

const WebPost = () => {
  const { id } = useParams();
  return <div>#{id}번째 포스트</div>;
};

export default WebPost;

useHistory 삭제, useNavigate로 병합

useHistory로 기존의 useHistory 기능을 전부 대체

useHistory는 객체였지만 useNavigate는 함수이다.

기존코드

const history = useHistory();

history.push('/');
history.goback();
history.go(-2);
history.push(`/user/${user._id}`);

바뀐코드

const navigate = useNavigate();

navigate('/');
navigate(-1);
navigate(-2);
navigate(`/user/${user._id}`);

출처

react-router-dom이 v6으로 업그레이드 되었습니다 :) v5와 다른 점이 몇 가지 있으니 꼭 숙지하시기 바랍니다. 안그럼 아무것도 실행되지 않을지도....