출처: kimkkikki.github.io/flask/2019/03/15/flask_react_router.html

테스트하다보니 현재 기준으로 안되는 부분들이 있어서 일부 수정했다.

package.json

{
  "name": "flask_react_router",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1"
  }
}

private: true 추가

App.js

import React from 'react'
import { Route } from 'react-router-dom';
import First from './containers/First';
import Second from './containers/Second';

const App = () => {    
	return (
		<>
			<Route path='/first' component={ First } />
			<Route path='/second' component={ Second } />
		</>
	);
}

export default App;

함수 베이스로 수정

First.js, Second.js

import React, { Component } from 'react';

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

export default First;

이것도 함수 베이스로 수정

잘 돌아간다.

css 파일이 없어서 생기는 에러는 import한 css 파일이 없어서 생긴 문제라서 빈 css 파일을 만들어서 import하고 webpack 해주면 flask_react_router.css이 생성되면서 해결된다.