리액트 라우터 사용하기

리액트 라우터 사용하기

세팅

1. 터미널에
   npm install react-router-dom@6 입력
2. index.js 코드 추가

• //브라우저라우터로 앱을 감싸줌
  import { BrowserRouter } from "react-router-dom";
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
        <BrowserRouter>
          <App />
        </BrowserRouter>
    </React.StrictMode>
  ); 

Routes

• function App(){
    return (
      <Navbar/>
      <Routes>
        <Route path="/main" element={<Main/>} />
        <Route path="/detail" element={ <Detail/> } />
        <Route path="*" element={ <div> 없는 페이지 입니다. </div> } />
        <Route>
      </Routes>
    )
  }
  export default App;
  export default App;

• 컴포넌트는 페이지 주소에 상관없이 보이고,
  /main 접속시에는

• 페이지만, /detail 접속시에는 페이지만 보임

• path="*" 으로 하면 404 페이지 보여준다.(정해진 url 외 경로에 대한 페이지)

Link

• html의 a 태그 역할

• 부트스트랩의 클래스명 사용하면 Link 태그 꾸밀 수 있다

• import { Link, useLocation } from 'react-router-dom';
  
  function App() {
    return (
      <>
        <Link className="nav-link navbar-brand" to="/">
          홈
        </Link>
        <Link className="nav-link" to="/detail">
          상세페이지
        </Link>
      </>
    );
  }
  export default App;

useNavigate

• 페이지 이동 도와와주는 hook(함수)

  import { Link, useLocation } from 'react-router-dom';
  
  function App() {
  return (
      <>        
          <Nav.Link onClick={() => {navigate('./detail');}}>
              상세페이지로 이동
          </Nav.Link>
          <Nav.Link onClick={() => {navigate(-1);}}    >                
              뒤로가기
          </Nav.Link>
      </>
  );
  }
  export default App;

nested Routes

•  function About() {
     return (
       <div>
         <h4>About 페이지</h4>
         <Outlet/>
       </div>
  
     )
   }

• <Route path="/about" element={ <About/> } > <Route path="member" element={ <div>멤버</div> } /> <Route path="location" element={ <div>위치정보</div> } /> </Route>

• About 컴포넌트의 의 위치에 nesting된 페이지가 보여진다.

• /about/member 로 들어가면 컴포넌트 안에 멤버 들어가있다.

Route parameter와 useParams

• App.jsx

•   <Route path='/detail/:id/:brand' element={<Detail shoes={shoes} />} />

• Detail.jsx

•  import { useParams, Link } from 'react-router-dom';
   function Detail(props) {
     let { id, brand } = useParams();
     return (
       <>
         <div>props.shoes[id].title</div>
       </>
     )
   }

• useParam 이라는 훅을 사용해서 url 파라미터 정보에 부합하는 데이터를 보여줄 수 있다.

• 파라미터는 여러 개 사용할 수 있다.