React-Router

qoik11·2019년 12월 8일
0

React

목록 보기
2/2

리엑트 라우터란 express 와 마찬가지로 라우터 하는 용도로 쓰이고있다.

사전준비
1.yarn add react-router-dom
2.Router.js 파일 생성

// src/Components/Router.js
import React from "react";
import { HashRouter as Router, Route } from "react-router-dom";
import Home from "Routes/Home";
import TV from "Routes/TV";
import Search from "Routes/Search";
export default () => (

<>



</>

);

그리고 각각의 url 에 행당되는 js 폴더를 만든다

// src/Routes/Detail.js
export default() => "Detail";

// src/Routes/Home.js
export default() => "Home";

// src/Routes/TV.js
export default() => "TV";

// src/Routes/Search.js
export default() => "Search";

그리고 헤더 폴더를 하나 만들어서 엥커를 렌더링한다
//src/Components/Header.js
import React from "react";

export default () => (

);

그리고 나서 다시 라우터 폴더로 들어간후
import React from "react";
import {
BrowserRouter as Router,
Route,
Redirect,
Switch
} from "react-router-dom";
import Home from "Routes/Home";
import TV from "Routes/TV";
import Search from "Routes/Search";

export default () => (










);
Switch 를 임폴트 해준다 이때 Switch 를 불러오는 이유는 오직 하나의 Route만 Render를 하기 해주기 위함이다.
이렇게하면 간단한 라우터 만들기가 끝이난다.

profile
비전공 고졸 성팡이 개발자 되기 프로젝트

0개의 댓글