[React] router 초기 셋팅

1. router 라이브러리 다운로드

npm

npm install react-router-dom
npm install react-router

yarn

yarn add react-router-dom
yarn add react-router

2. index.js 코드 수정

이 코드에서

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

이 코드로 수정

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

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

이제 라우터를 사용할 수 있습니다.
그리고 버전 6부터 작성법이 조금 달라졌습니다.

링크

버전 확인 방법

package.json

{
  "name": "reduxtest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    
    <!--- 버전 6.2.1 --->
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1",
    
    "react-scripts": "4.0.3",
    "redux": "^4.1.2",
    "redux-devtools": "^3.7.0",
    "styled-components": "^5.3.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

변경된 부분

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

에서

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

으로 import를 해야한다고 합니다.

v6 이전버전

<Route path="/" component={Home} />

v6 이후버전

<Route path="/" element={<Home/>}/>

그리고 react-router-dom에서는 Route 선언에서도 exact를 사용할 필요가 없습니다.

결과

App.js

import {Route,Routes } from 'react-router-dom'
import Home from './routes/Home'
import Detail from './routes/Detail'

function App() {
  return (
    <div>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/:id' element={<Detail />} />
      </Routes>
    </div>
  );
}

export default App;

Home.jsx

const Home = () => {
  return 'Home';
}
export default Home;

이제 Route 컴포넌트에 exact 속성을 넣지 않아도 합쳐서 출력되지 않는 걸 볼 수 있습니다.