[React] Link 로 페이지 이동 Routes , Route 사용하는법

React 에서  Link 로 페이지 이동 Routes , Route 사용하는법 

Link 로 페이지 이동하고 싶다면

  <Link to='/'>메인페이지</Link>
  <Link to='/sub'>서브페이지</Link>

이렇게 사용하는데

여기서 to = ' 이 안에 적을 주소' 

이안에 적을 주소  는 App.js 에서 만들어 줘야 합니다.

 

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path='/' element={<MainPage/>}/>
        <Route path='/sub' element={<SubPage/>}/>
      </Routes>
    </div>
  );
}

export default App;

 이런 식으로요!

그리고 Routes와 Route 를 사용하려면

비주얼 스튜디오의 터미널에

npm i react-router-dom routes route

이렇게 3개를 연달아 다운받아준뒤 Import 해줘야합니다.

그리고 마지막으로 index.js 로 이동해서 

아래와 같은 부분에

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

이렇게 BrouserRouter 를 import 해준뒤

App 전체를 감싸줘야 합니다.

가장 밖에서!! 그래야 작동합니다.