[React] react router (v6)

 

올만에 리액트 하려는데 라우터가 버전이 변경돼있었다.

 

사용법이 조금 달라진듯 하다

 

 

 

 

---

1. React Router 설치

npm install react-router-dom@6 history@5

 

2. URL 연결

 

src/index.js 파일에 코드를 추가해주자.

import React from "react";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { render } from "react-dom"; // 추가된 부분
import { BrowserRouter, Routes, Route } from "react-router-dom"; // 추가된 부분

// 앱에서 변경된 사항은 없지만, URL을 조작할 준비

// 추가된 부분
const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
  	<App/>
  </BrowserRouter>,
  rootElement
);


reportWebVitals();

 

3. App.js 

 

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

export default function App() {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottom: "1rem"
        }}
      >
        <Link to="/singin">singin</Link> |{" "}
        <Link to="/singup">singup</Link>
      </nav>
    </div>
  );
}

 

 

 

4. Link 페이지 생성

 

나는 Signup과 SignIn 페이지를 간단하게 작성했다.

// 파일 위치 : src/containers/signup/index.js
//Singup Page

import React from "react";

function Signup() {
  return (
    <main style={{ padding: "1rem 0" }}>
		<h2>SIGNUP</h2>
    </main>
  );
}

export default Signup;

// 파일 위치 : src/containers/signin/index.js
//Singin Page


import React from "react";

function SignIn() {
  return (
    <main style={{ padding: "1rem 0" }}>
		<h2>SIGNIN</h2>
    </main>
  );
}

export default SignIn;

 

5. 경로 추가

 

src/index.js 파일에 경로를 추가해주자. 나는 Singup과 Signin이다.

 

import React from "react";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { render } from "react-dom"; 
import { BrowserRouter, Routes, Route } from "react-router-dom"; 
import Signin from "./containers/signin"; 
import Signup from "./containers/signup";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}/>
      <Route path="signin" element={<Signin />} />
      <Route path="signup" element={<Signup />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);

reportWebVitals();

 

 

 

 

 

 

잘 작동하는 것을 볼 수 있다.

 

 

6. 깨달음

    <Routes>
      <Route path="/" element={<App />}/>
      <Route path="signin" element={<Signin />} />
      <Route path="signup" element={<Signup />} />
    </Routes>

이렇게 하면 페이지가 다 바뀌는 것을 볼 수 있다.

 

요새 유행하는 SPA는 (예를 들어) 내비게이션바는 그대로 있고 바디만 바뀌는 것을 어렵지 않게 볼 수 있다.

 

그렇게 하고 싶다면

 

    <Routes>
      <Route path="/" element={<App />}>
      	<Route path="signin" element={<Signin />} />
      	<Route path="signup" element={<Signup />} />
      </Route>
    </Routes>

요렇게 고치면 된다!