라우트 링크 렌더링이 안됩니다

[리액트꿈나무]

안녕하세요 

 

index.js에서 브라우저라우터로 app을 감싸고

app에서는 

switch > route 로 분기처리하고

nav에서는 nav.link as ={link} to ="경로" 로 처리하였습니다 

 

nav에서 클릭하면 url은 정상적으로 변경이 되지만

렌더링이 되지 않고, 새로고침을 하면 정상적으로 보이고 있습니다

 

비슷하게 코딩을 하면 리액트에서 재 렌더링필요성을 못느낀다해서

완전 다르게 구성했습니다

 

어떤부분을 더 확인해야할까요? 해결방법이 없을까요?

 

 

 

[리액트꿈나무]

강의랑 차이점은 serviceWorker.js 가 없어서 import할 수 없고

reportWebVitals.js 파일이 src아래에 생겼습니다.

[codingapple]

라우터 첫강의처럼 index.js 파일을 바꿔주면 됩니다 

[리액트꿈나무]

아무리 찾아봐도 해결방법이 안나와서

말씀하신대로 똑같이 변경하니 라우트/링크가 정상작동 하네요

 

index.js에서 아래 두 곳 변경하시면 됩니다

안되시는분들 도움되시라고 적고 갑니다

 

변경전 import ReactDOM from 'react-dom/client';

변경후 import ReactDOM from 'react-dom';

 

변경전

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

변경후

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>    
  </React.StrictMode>,
  document.getElementById('root')
);

[글쓴이]

글