React Router

Setting Up the Project

• create-react-app 생성한뒤 src의 바깥 폴더에 .env 파일 생성

Node_PATH=src

본 이유는 나중에,, 항상 이렇게 프로젝트를 셋업한뒤 시작한다고 한다.

• Prop type 설치

$ npm add prop-types

or

$ yarn add prop-types

• npm start

React Router Part One

components 폴더를 생성해서 App.js 파일을 components폴더로 옮긴다. 이때 index.js에서 App.js 파일 경로가 달라졌기 때문에 에러가 날 것이다.

// index.js
import App from 'components/App.js'

파일 경로를 위와 같이 바꿔주자.

원래는 ./'components/App.js'와 같이 처리해줬는데 ./를 생략해도 되는 이유는 첫 셋업때 .env 파일에 설정값을 줬기 때문

NODE_PATH=src 은 파일경로가 기본적으로 src파일을 보도록 한다는 뜻이다.

❌ 이때 .env파일 설정값을 줬음에도 에러가 발생한다

따로 jsconfig.json파일을 생성해서

{
	"compilerOptions": {
		"baseUrl": "src"
	}
}

컴파일 옵션을 줬더니 해결이 되었다.

• 라우터 설치

$ npm i react-router-dom

• HashRouter (라우터설정)

// Router.js
<Router>
	<Route  path="/"  exact  component={Home}/>
	<Route  path="/tv"  component={TV}/>
	<Route  path="/search"  component={Search}/>
</Router>

<Route>는 꼭 <Router>안에 위치되어 있어야 한다.

• 폴더구조

- Components
	- App.js
	- Router.js
- Routes
	- Home.js
	- TV.js
	- Search.js
	- Detail.js

App.js

import React, { Component,Fragment } from  'react';
import Router from  'Components/Router'

class  App  extends  Component {
	render() {
		return (
			<>
			<Router/>
			</>
		);
	}
}
export  default  App;

Router.js

export  default  ()  => (
	<Router>
		<Route  path="/"  exact  component={Home}/>
		<Route  path="/tv"  component={TV}/>
		<Route  path="/search"  component={Search}/>
	</Router>
)

React Router part Two

Hash Router vs BrowserRouter

Hash Router

• url에 #가 들어가지만 간단한 라우터
• 웹사이트에 있다는 느낌을 주진 못하지만 앱에 있다는 느낌을 준다??

BrowserRouter
-실제로 브라우저처럼 보여준다.

• HTML history API 사용

둘 중 원하는 것 선택하면 된다. 기능은 같다

React Router Composition

Composition은 두개 이상의 Route를 동시에 렌더링하는 방식

<Route  path="/tv"  component={TV}/>
<Route  path="/tv/popular"  render={ ()=>  <h1>Popular</h1> }  />

tv라우터와 popular라우터가 동시에 렌더된다.

이렇게 두가지의 Route를 렌더링하고 싶을때 사용한다.

Redirect

<Redirect  from="*"  to="/"  />

일치하는 페이지가 없을 경우에 to로 리다이렉트해주기 위한 동작

Switch
한번에 오직 하나의 Route만 렌더링하도록 한다.

<Router>
	<Switch>
		<Route  path="/"  exact  component={Home}/>
		<Route  path="/tv"  exact  component={TV}/>
		<Route  path="/tv/popular"  render={()=>  <h1>Popular</h1>}  />
		<Route  path="/search"  component={Search}/>
		<Redirect  from="*"  to="/"  />
	</Switch>
</Router>

출처

• 초보를 위한 React JS