react-router-dom

next.js 를 사용하면 파일명으로 자동 라우팅 되어 편했는데..
간만에 router 설정 해보자

yarn add react-router-dom

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Frige from "./components/Frige";
import Home from "./components/Home";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="frige" element={<Frige />} />
      </Routes>
    </Router>
  );
};
export default App;

webpack-dev-server 설정

webpack-dev-server 설정을 해주지 않으면
default path인 "/" 를 제외하곤 접근이 안된다
아래와 같이 설정해주면 접근 가능

// webpack.config.json

 devServer: {
    host: 'localhost',
    port: 3000,
    historyApiFallback: true,
    open: true
  }