[React] 라우팅, 라우터

 

1. 페이지를 분리하는 방법

 

1) 리액트를 사용하지 않고 페이지 나누는 법

① html 파일 만들어서 상세페이지 내용 채움

② 누가 /detail로 접속하면 html 파일 보내줌

 

2) 리액트를 사용해서 페이지 나누는 법

① 컴포넌트 만들어서 상세페이지 내용 채움

② 누가 /detail로 접속하면 그 컴포넌트를 보여줌

 

 

 

2. 리액트를 사용해서 페이지 나누는 방법

1) react-router-dom 라이브러리 사용

설치

npm install react-router-dom

 

 

2) index.js파일에 import하고  <BrowserRoter>로 <App/ > 감싸기

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();

 

3) App.js 파일에 import

import { Routes, Route, Link } from 'react-router-dom';


function App() {

  let [shoes] = useState(data);


  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<div>메인페이지</div>}/>
        <Route path="/detail" element={<div>상세페이지</div>}/>
        <Route path="/about" element={<div>about page</div>}/>
      </Routes>
      
      // 페이지 이동
      <Link to="/">홈</Link>
      <Link to="/detail">상세페이지</Link>

// 생략...

	</div>
  );
}

 

4) nested routes

- <Outlet>은 nested routes의 element를 보여주는 위치

<Route path="/detail" element={<Detail />}/>
<Route path="/about" element={<About />}>
  <Route path="member" element={<div>about copany member</div>}/>
  <Route path="location" />
</Route>



function About() {
  return (
    <div>
      <h4>about company</h4>
      <Outlet></Outlet>
    </div>
  )
}