react-router-dom v6 사용하기

 

react-router-dom 라이브러리 버전에 따라 문법이 달라졌다.

어이가 없지만..

어떻게 해결하면 되는지 보자

v5에서는 Switch를 사용한다. 

 

v6에서는 src/index.js 를 먼저 수정해줘야 한다.

첫째, index.js 수정

index.js 에서는 맨 처음에 어떤 컴포넌트를 불러줘야하는지 정의를 해준다.

<App /> 컴포넌트를 <BrowserRouter>로 감싸줘야 한다.

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 

둘째, App.js 수정

index.js에서 App.js로 라우팅을 해줬으니...첫 페이지는 App.js에서 수정할 수 있게끔 되었다.

v6에서는 Link와 같은 모듈은 필요없다.

Routes와 Route만 사용할 뿐.

 

Routes 안에 세부 라우팅 정보 즉, 웹페이지 경로를 정의해주면 된다.

 

import React from "react";
import { Routes, Route } from "react-router-dom";
import Home from "./Screenpages/Home";
import Movies from "./Screenpages/About";

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

export default App;

 

https://reacttraining.com/blog/react-router-v5-1/

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

// In the code below, BlogPost is used as both a <Route component>
// and in a <Route render> function. In both cases, it receives a `match`
// prop, which it uses to get the URL params.
function BlogPost({ match }) {
  let { slug } = match.params
  // ...
}

ReactDOM.render(
  <Router>
    <div>
      <Switch>
        {/* Using the `component` prop */}
        <Route path="/blog/:slug" component={BlogPost} />

        {/* Using the `render` prop */}
        <Route
          path="/posts/:slug"
          render={({ match }) => <BlogPost match={match} />}
        />
      </Switch>
    </div>
  </Router>,
  document.getElementById('root')
)

https://reacttraining.com/blog/react-router-v5-1/

V6 에서는 Link 사용.

 

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  /* All <Route path> and <Link to> values in this
     component will automatically be "mounted" at the
     /users URL prefix since the <Users> element is only
     ever rendered when the URL matches /users/*
  */
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path="/" element={<UsersIndex />} />
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}