React / react-router-dom v5 와 v6 라우팅 설정

react-router-dom v6로 2021년 11월쯤 바뀐 것 같다.

버전 업데이트가 되면서 약간씩 변화가 생겼다.

v6로 connetedrouter 를 사용했었는데 아직 호환이 안되는듯 싶어 v5로 다운그레이드하여 했다.

 

v5 다운 그레이드

npm i react-router-dom@5.2.0

 

 

1. 라우팅 설정 switch 와 routes , component 와 element 

 

v5 방식

import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./pages/Home";
import Write from "./pages/Write";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={() => <Home />} />
        <Route exact path="/write" component={() => <Write />} />
        <Route component={() => <div>Page Not Found</div>} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

1. Switch를 사용한다.

2. exact로 복수의 라우팅을 막습니다.

3. component={} 내에 arrow function을 사용하여 component를 전달합니다.

 

v6 방식

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Main, Page1, Page2, NotFound } from "../pages";
import { Header } from ".";

const Router = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/page1/*" element={<Page1 />} />
        <Route path="/page2/*" element={<Page2 />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

1. exact 는 더이상 사용하지 않고 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 * 을 사용합니다.

2. component 대신 elemet로 바로 component를 전달합니다.

 

 

2.리다이렉트 설정 useHistoy 와 useNavgate 

 

v5 방식

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

function App() {
  let history = useHistory();
  function handleClick() {
	    history.push("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

v6 방식

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

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

 

 

 

출처 : https://velog.io/@soryeongk/ReactRouterDomV6