[React]react router 사용법

react-router-dom 페이지

1. 설치

$ npm i react-router-dom

 

2. 디렉토리 구조

📁 프로젝트

|--📁src

|       |--📁 router

|                    |--Router.js

|        |-- 📁 page

|                   |--Community.tsx

|-- app.tsx

 

3. 작업 대상 파일

📄 src/router/Router.js

📄 src/page/community.tsx

📄 app.tsx

 

 

4.  📄 src/router/Router.js 작성

React-router-dom 라이브러리에서 다음 3개지 프로퍼티를 사용했습니다.

<Switch>

접근경로에 따른 컴포넌트가 많을 경우, Switch 태그를 사용합니다. Switch태그 안에 <Route>태그를 여러 개 지정해서 사용합니다.

 

<Route>

<Route> 태그에 path에 설정한 경로에 맞는 경로로 component를 표시할 수 있습니다.

exact 옵션은 반드시 path옵션에 설정한 경로에서만 컴포넌트를 호출하게 하는 옵션입니다. Redirect 태그를 사용하기 때문에 사용했습니다.

 

<Redirect>

Redirect태그는 <Route>태그에서 지정한 path 이 외의 경로로  접근했을 때, to 옵션에 설정한 경로로 redirect시키는 태그입니다.

저 같은 경우, 이번 프로젝트에서는 사용자가 잘못된 경로로 접근하는 경우에 '/' 경로로 redirect 시켰습니다.

import React from 'react'
import {Route, Redirect, Switch} from 'react-router-dom';
import Community from '../page/Community';
const ComponentRouter = () => {
  return (
    <Switch>
      <Route exact path="/" component={Community} />
      <Route exact path="/..." component={...} />
      { /* ...*/}
      <Redirect from="*" to="/" />  {/* path에 적힌 것 이 외의 경로 접근은 '/'로 이동 */}
    </Switch>
  )
}


export default ComponentRouter;

 

 

5. app.tsx

react-router-dom라이브러리의 BrowserRouter는 현재 URL에 맞는 컴포넌트를 보여주기 위해서 HTML5 history API를 사용합니다.

<HashPortion>이라는 같은 기능을 하는 태그가 있습니다. 차이점은 HTML5 history API가 아니라 URL의 hash portion을 사용한다는 점입니다.

 

import React from "react";
import "./App.css";
import Header from "./global/Header";
import TabMenu from "./global/TabMenu";
import { BrowserRouter } from "react-router-dom";
import Router from "./router/Router";


function App() {
  return (
    <div className="App">
      <Header />
      <TabMenu />
      <BrowserRouter> 
        <Router />  { /* Router.js 컴포넌트를 jsx에 요소로 추가합니다. */}
      </BrowserRouter>
    </div>
  );
}

export default App;

 

 

버튼에 Router link 거는 법

1. JSX에서 Link요소를 사용

<Link to="/signin">로그인</Link>
<Link to="/signup">회원가입</Link>

 

2. Javascript에서 사용

 

3. Material-UI에서 사용

<Button component={Link} to="/"></Button>

// or

<Tabs>
  <Tab label="커뮤니티" component={Link} to="/" />
</Tabs>