[FrontEnd]React-Router

Index.js

import React from "react";

import ReactDOM from "react-dom";

import { BrowserRouter } from "react-router-dom";

import App from "./App";

ReactDOM.render(

<BrowserRouter>

<App />

</BrowserRouter>,

document.getElementById("root")

);

BrowserRouter 컴포넌트에 속한 컴포넌트는 라우터라는 기능을 사용 할 수 있게 되나보다.

App.js

import React from "react";

import { Route , Link } from "react-router-dom"

const App = () => (

<div>

<Header />

</div>

);

const Header = () => (

<header>

<h1>My Contacts</h1>

<nav>

<ul>

<li><Link to="/">Home</Link></li>

<li><Link to="/contact">Contacts</Link></li>

</ul>

</nav>

<Route exact path="/" component={Welcome}></Route>

<Route path="/contact" component={Contacts}></Route>

</header>

)

const Welcome = ( ) => (<h1>Welcome to the best contacts app!</h1>)

const Contacts = ({match}) => (

<div>

<ul>

<li><Link to ={"/contact/Moon"}>Moon</Link></li>

<li><Link to ={"/contact/Kim"}>Kim</Link></li>

<li><Link to ={"/contact/Park"}>Park</Link></li>

</ul>

라우터 라이브러리에는 두가지 패키지가 있는데,

바로 Route와 Link이다.

Route는 컴포넌트를 어떤 URL로 통해서 렌더링하느냐

Link는 <a href>와 같은 링크 역할을 한다.

<Link to = "URL">

<Route exact(정확이 path의 url만 원할 때) path ="URL" component={렌더링하고싶은 URL}></Route>

const Contacts = ({match}) => (

<div>

<ul>

<li><Link to ={"/contact/Moon"}>Moon</Link></li>

<li><Link to ={"/contact/Kim"}>Kim</Link></li>

<li><Link to ={"/contact/Park"}>Park</Link></li>

</ul>

<Route

exact path={`${match.path}`}

render={() => <h3>Please select a contact</h3>}

/>

<Route path={`${match.path}/:contactName`} component={Contact} />

</div>

);

const Contact = ({match}) =>

`Your friends name is ${match.params.contactName}`;

export default App;

그리고 컴포넌트는 match라는 파라미터를 가질 수 있는데

이는 props와 비슷한 역할을 한다

<Route exact path={`${match.path}`}에서

match는 Contacts의 props

그리고 그 중 path는

<Route path="/contact" component={Contacts}></Route>

여기서 정의되었다.

또

<Route exact path={`${match.path}/:contactName`} component={Contact} />에서

루트URL 뒤에 올 contactName이라는 어떤 url이 들어오면 contact컴포넌트를 부른다.

그리고

Contact 컴포넌트에도 match를 받고

${match.params.contactName}를 찾는데,

이 값은 : 로 정해둔 값이다.

<li><Link to ={"/contact/Moon"}>Moon</Link></li>

이름 링크에 다음과 같은 URL이 contactName에 할당되어

Your friends name is (URL의 이름)이 된다.