BrowserRouter 왜 화면이 출력이 안되는거지?

BrowserRouter는 최상위에 위치해 있어야 하는데 그래야 다른 react.router 컴포넌트들을 사용할 수 있다. 

근데 내가 BrowserRouter를 써주는데 이상하게 계속 화면이 출력이 안되는것이다(spa 과제 다시 푸는 중에)

그래서 레퍼런스에 올린 코드를 보면서 일일히 비교해 보는데 BrowserRouter를 안쓰면 화면이 출력이 되는것이다!

아니 근데 저 BrowserRouter를 써야 다른 라우터 컴포넌트를 이용할 수 있다고 배웠는데 없어야 되는건가 싶어서 

계속 레퍼런스 코드와 비교하다가 index.js 코드가 다른것을 확인할 수 있었다. 

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

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
// 내거에 써져있던 코드 

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
// 레퍼런스 코드

index.js에 이미 App 컴포넌트를 BrowserRouter로 감싸주었으면서 App.js에 또 감싸주어서 출력이 안되었던것 같다 

 <BrowserRouter>
  <div className="App">
    <main>
      <Sidebar />
      <section className="features">
        {/* TODO - Routes와 Route 컴포넌트를 이용하여 경로(path)를 설정하고 Tweets, Mypage, About 컴포넌트를 연결합니다. */}
        <Routes>
          <Route path='/' element={<Tweets/>}/>
          <Route path='/about' element={<About/>}/>
          <Route path='/mypage' element={<MyPage/>}/>
        </Routes>
        <Tweets />
      </section>
    </main>
  </div>
  </BrowserRouter> // 내 App.js 에 썼던 코드

그리고 나서 advanced 를 하는데 또 화면 출력이 안되길래 내 추측이긴 한데 

const App = () => {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate(-1)}>BACK!</button>
      {/* TODO - BrowserRouter 컴포넌트를 작성합니다. */}
      <BrowserRouter>
      <div className="App">
        <main>
          <Sidebar />
          <section className="features">
            {/* TODO - Routes와 Route 컴포넌트를 이용하여 경로(path)를 설정하고 Tweets, Mypage, About 컴포넌트를 연결합니다. */}
            <Routes>
              <Route path='/' element={<Tweets/>}/>
              <Route path='/about' element={<About/>}/>
              <Route path='/mypage' element={<MyPage/>}/>
            </Routes>
            <Tweets />
          </section>
        </main>
      </div>
      </BrowserRouter>
    </div>
  );
};

BrowserRouter는 최상위에 위치해 있어야 하는데 react.router 중 하나인 useNavigate 가 BrowserRouter보다 위에 위치해 있어서 또 화면이 출력이 안되는것 같다. 그래서 그냥 BrowserRouter는 App.js에 적지말고 index.js 에 적는게 나은것 같다.

 

테스트는 진즉에 통과를 했는데 계속 화면이 출력이 안돼서 1시간 이상 소비한듯 싶다,., 

근데 확실히 공부하고 다시 푸니까 정말 쉽다. 다른 페어분들은 이렇게 쉬운걸 나때문에 기다려 주신거구나 싶었다..