react router v6 셋팅

router v6

버전이 올라가면서 자연스럽게 react router 를 6버전을 사용합니다.

root 에서 index.jsx 를 아래와 같이 셋팅 해줍니다.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import Main from "./layouts/Main.jsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <Main />
    </BrowserRouter>
  </React.StrictMode>
);

라우팅 셋팅을 해줍니다. 이제 Routes 라는 훅을 사용합니다.
또한, Route 에서 component 가 아닌, element 를 사용합니다.

import { Route, Routes } from 'react-router-dom';
import About from './About';
import Home from './Home';

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
};

export default App;

Link 를 아래와 같이 사용해줍니다.

import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">소개</Link>
    </div>
  );
};

export default Home;