리엑트 라우터(리엑트에서 페이지전환을!)

나는 SPA에서 어떻게 페이지 전환을 할까 궁굼했다. 

근데 라우터라는 것으로 가능하다고 한다.

 

알아보자.

 

https://reactrouter.com/

Declarative routing for React apps at any scale | React Router

요기서 스타트를 해준다.

 

그다음 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>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이렇게 BrowserRouter을 설정해주면 된다. 

 

문법은 다음과 같다. 

  <Routes> 
   <Route path='/(페이지명)' element={html소스}/>
  </Routes>

 

엘리먼트에는 컴포넌트를 만들어서 쓰면 좋다 .

 

예를 들면 About이라는 컴포넌트를 만들었다고 생각하자

 

function About(){
  return(
  <div>
    회사 정보임
    <Outlet></Outlet>
  </div>
  )

,

<Route path='/about' element={<About/>}>

엘리먼트 태그를 넣게되면 이렇게 나온다.

중첩도 가능하다

about/member 이런식으로 중첩

 

       <Route path='/about' element={<About/>}> 
          <Route path='member' element={<div>맴버임</div>}/>
          <Route path='location' element={<About/>}/>
        </Route>

 

이렇게 맴버임이 나온다.

 

애플코딩이라는 렉쳐를 통해 공부를 하고있는데

리엑트에 대해서 알아가는게 점점 성장하는것이 보인다. 

 

useState, props 등등 배운것을 항상 정리하자.