react 개발 일지 - Document 로 되돌아가다.

정확히는 여기에서 정면으로 맞딱뜨린 에러다. 바로 버전업에 따른 이전 기능 작동 불가 문제.

추정상 리엑트 또는 노드js 측의 업데이트가 원인으로 사료되지만, 아무튼 안된다.

import React from "react";
import './App.css';
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from './pages';
import About from './pages/about';


function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

대략 이런 느낌으로 있으면, 되어야 할 녀석이 안되고 자꾸만 My Music 이라는 directory 에러 메세지만 띄운다.

여기서 My Music 에 원인을 두고 무려 리엑트 템플릿을 두번이나 리셋 해대며 갈아 엎어도 봤지만, 여기서 드는 의문이 있었다.

 

'혹시 특정 기능 때문은 아닐까.'

 

그렇게 추적해본 결과...react-router-dom 의 <Switch> tag 가 작동하지 않는 다는 점을 알았다.

https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom

Attempted import error: 'Switch' is not exported from 'react-router-dom'

4일을 이렇게 어이없게 흘려버린 걸 생각하면 분하지만, 그래도 이제 정말 스스로 문제를 해결 해 낼 수 있다는 점에서 희망이 생긴다.

 

아래는 수정본의 결과이다.

import React from "react";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home, Skills, Projects, About, Contact } from './pages';


function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" exact component={<Home/>} />
        <Route path="/about" component={<About/>} />
        <Route path="/skills" component={<Skills/>} />
        <Route path="/projects" component={<Projects/>} />
        <Route path="/contact" component={<Contact/>} />
      </Routes>
    </Router>
  );
}

export default App;