새 리액트 앱 구성 중 에러 발생

[dusunax]

• 새 리액트 앱을 생성하고, react-router-dom을 새로 설치 후
  router를 작성하던 중 발생한 에러입니다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from "../pages/Main";

const Router = () => {
    return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Main />} />
        </Routes>
    </BrowserRouter>
    );
};

export default Router();

[dusunax]

• 오류1: export의 함수명에 ()가 있어서 오류 생김
  => 고쳐도 오류 발생
  => 에러 코드 다시 읽기

export default Router;

[dusunax]

• 오류2: router.jsx와 api.jsx의 이름을 Router.jsx, Api로 변경
  => 수정 후 에러 변경 없음

[dusunax]

• 오류3: Router 잘못된 점 수정

import { Router } from "react-router-dom";
import Router from "./shared/Router";

[dusunax]

해결!

1. configStore 수정 내용: 더미값 추가

2. Main의 ()제거

import React from "react";

const Main = () => {
  return (
      <>
          Main
      </>
  );
};

export default Main;

결론

1. configStore의 reducer, rootReducer에 값이 없다면 에러가 발생합니다.
   => 더미 값이라도 넣어야 함

Store does not have a valid reducer...

3. 컴포넌트를 export할 때 습관적으로 ()를 붙이면 이번과 같은 에러가 발생합니다.
   => type에러 발생 시 export, import를 먼저 확인하기

(Warning: **React.jsx: type is invalid --e**)