link로 라우터 사용하기 관련 질문드립니다.

[윤준호]

            <Nav.Link> <Link to="/">Home</Link> </Nav.Link>
            <Nav.Link> <Link to="/detail">Detail</Link> </Nav.Link>

했는데 위에 주소창만 바뀌고 이동이 안됩니당..

마찬가지로 

<button className="btn btn-danger" onClick={ ()=> {
                  history.push('/');
                }}>홈으로</button>

등을 사용해도 주소창엔 변화가 있는데 이동이 되질 않네요...

[codingapple]

index.js 바꿨던걸 원래대로 돌려놓읍시다 

[윤준호]

수업 그대로 따라갔는데 어떻게 바꾸라는 건지 잘 이해가 안되네요. ..

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { BrowserRouter } from 'react-router-dom';

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

 

이걸 어떻게 수정해야 하나요?

+ 선생님 코드를 보면 import * as serviceworker from './serviceworker' 도 있던데 이것도 추가해야 하는 건가요?

[윤준호]

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

다른분이 만들어 놓은 코드인데 이걸 쓰니 되긴 되는데... 

바로 위의 코드랑 무슨 차이가 있는지 설명 부탁드려도 될까요...? 

[codingapple]

위에것이 리액트 18버전이고 밑에게 17버전인데

리액트라우터5버전은 17버전이랑 같이써야해서 그렇습니다 

[글쓴이]

글