🔧[ React-router-dom ] react-router-dom v6 달라진 점

react 강의를 들으면서

react-router-dom의 버전이 맞지 않아 고생을 꽤 했다.

만약 엘리 드림코딩 [ 리액트 개념 정리 + 유튜브 클론 코딩 외 실전 프로젝트 완성 ]

이나

노마드 코더 [트위터 클론코딩]

을 들으면서 버전에 어려움을 겪는다면..

댓글로 물어봐주시면 한번 들어본 초보자로서 제가 아는 정보 내에서 최대한 알려드릴게요👼🤍

 

react 버전차이를 설명해주는 좋은 글이 많았지만 어쨌든 나도 써보려고 한다

 

 

 

 

 

 

설치

 

npm

$ npm install react-router-dom@6

 

Yarn

$ yarn add react-router-dom@6

 

pnpm

$ pnpm add react-router-dom@6

 

 

 

 

 

 

 

사용 방법

 

 

router을 만들고 싶은 곳에

 

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

 

BrowserRouter을 import해준다

HashRouter도 있음.

 

 

v5

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Home from "./components/home/home";
import TestPage from "./components/test_page/test_page";
import Result from "./components/result/result";
import QMbti from "./components/test_page/q_mbti";

const AppRouter = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={() => <Home />} />
        <Route path="/test" component={() => <TestPage />} />
        <Route path="/mbti" component={() => <QMbti />} />
        <Route path="/result" component={() => <Result />} />
      </Switch>
    </BrowserRouter>
  );
};

export default AppRouter;

 

v6

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./components/home/home";
import TestPage from "./components/test_page/test_page";
import Result from "./components/result/result";
import QMbti from "./components/test_page/q_mbti";

const AppRouter = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/test" element={<TestPage />} />
        <Route path="/mbti" element={<QMbti />} />
        <Route path="/result" element={<Result />} />
      </Routes>
    </BrowserRouter>
  );
};

export default AppRouter;

1, 2번 참고

 

 

1. Switch => Routes

 

구버전에서는 Switch를 볼 수 있었을 것이다

v6부터는 Switch가 Routes로 바뀌었다.

그러니까

BrowserRouter이 최상단에 위치하고 그 아래

Routes

Route

순서대로 위치하면 된다. 

구버전과 비교했을 때 더 직관적으로 느껴졌다.

 

 

2. component 전달방식

 

component 안에 arrow function을 넣어서 전달하던 방식이 element={<Component />} 로 바뀌었다.

이 component안에 props를 넣는 것도 가능하다

element={<Component result={result}/>}

이런식으로

 

 

 

 

v5

import React, { useState } from "react";
import { useHistory } from "react-router-dom";

const Home = (props) => {
  const [userName, setUserName] = useState("");
  const history = useHistory();

  history.push("/test");

 

 

v6

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

const Home = (props) => {
  const [userName, setUserName] = useState("");
  const navigate = useNavigate();
    
  navigate("/test");

 

 

3. useHistory() => useNavigate()

 

state는

 navigate("/test", { state: { name: userName } });

이렇게 사용할 수 있다. (test에  name: useName이 옮겨감)

 

 

4. useLocation()

 

props는 useLocation()으로 받아온다

 import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";

const TestPage = () => {
 const location = useLocation();
  const navigate = useNavigate();
  const [user, setUser] = useState("");
 
  useEffect(() => {
    setUser(location.state.name);
  }, []);
  }

useLocation()으로 받아와 state 안에 있는 정보들을 가져올 수 있다.

 

 

 

 

 

 

 

 

 

 

 

공식문서

 

 

가장 좋은 방법은 공식문서를 참고하는 것이다

 

 

https://reactrouter.com/

 

 

 

 

내가 써 본 변화들이 중점이라 더 추가될 가능성이 높다.

 

 

 

 

 

 

happy hacking!