리액트 라우터 react router (최신 node ver)

리액트 전체 링크

 

참고

- gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기

 

react-router-dom을 설치한다.

yarn add react-router-dom

 

index.js에 BrowserRouter를 추가한다.

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

라우팅할 component Home, Router1, Router2를 만들어둔다.

import React from 'react';

const Home = () => {
    return (
        <div>
            Home
        </div>
    );
};

export default Home;

 

Route path에 원하는 주소를 적고, component에는 보여 주고 싶은 컴포넌트를 등록하면 된다.

/r1 경로가 / 에도 포함되기 때문에 exact = {true} 옵션을 줘서 규칙을 구분한다.

Link 컴포넌트를 이용해서 다른 주소로 이동할 수 있는 링크를 만들면 된다.

//App.js
import { Route, Link } from "react-router-dom";

//routing components
import Home from "./page/Home";
import Router1 from "./page/Router1";
import Router2 from "./page/Router2";

function App() {
  return (
    <div className="App">
      <div>
        <Link to="/">홈</Link>
        <Link to="/r1">Router1</Link>
        <Link to="/r2">Router2</Link>
      </div>
      <div>
        <Route path="/" component={Home} exact={true} />
        <Route path="/r1" component={Router1} />
        <Route path="/r2" component={Router2} />
      </div>
    </div>
  );
}

export default App;

 

위의 코드는 2022년 기준으로 꽤 예전의 node에서 사용하는 코드이다.

최신 node에서는 아래와 같은 에러가 나올 수 있다. (react-router-dom ver 6)

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
The above error occurred in the <Route> component:

 

최신 node ver → react-router-dom v6에서는 "Routes"를 추가하고 아래와 같이 수정해야 한다.

exact 옵션은 삭제되었다.

//App.js 
import { Route, Link, Routes } from "react-router-dom";

//routing components
import Home from "./page/Home";
import Router1 from "./page/Router1";
import Router2 from "./page/Router2";

function App() {
  return (
    <div className="App">
      <div>
        <Link to="/">홈</Link>
        <Link to="/r1">Router1</Link>
        <Link to="/r2">Router2</Link>
      </div>
      <div>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/r1" element={<Router1 />} />
          <Route path="/r2" element={<Router2 />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

 

추가로 v6에서는 존재하지 않은 페이지에 대해 Switch대신 Routes에 아래와 같이 구문을 추가하면 된다.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/r1" element={<Router1 />} />
  <Route path="/r2" element={<Router2 />} />
  <Route path="/*" element={<h2>not found</h2>} />
</Routes>