SPA 페이지 구현(1)(react-router-dom, NODE_PATH, BrowserRouter,Route,Query-String)

react-router-dom

리액트 경로 설정을 도와주는 패키지입니다.

NODE_PATH 설정

import의 경로 설정을 절대경로로 변경을 해준다.

package.json

  "scripts": {
    "start": "NODE_PATH=src react-scripts start",
    "build": "NODE_PATH=src react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

BrowserRouter

BrowserRouter는 HTML5의 history API를 사용하여 새로고침하지 않고도 페이지 주소를 교체할 수 있게 합니다.

import React from 'react';
import { BrowserRouter} from 'react-router-dom';
import App from './App';

const Root = () => {
  return (
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  )
}

export default Root;

Route

Route는 페이지 주소를 설정할 때 사용합니다.

App.js

import React from 'react';
import { Route } from 'react-router-dom';
import { Home, About } from 'pages';

const App = () => {
  return(
    <div>
      <Route exact path="/" component={Home}/>
      <Route path="/about/:name?" component={About}/>
    </div>
  )
}
export default App;

exact는 '/'정확히 일치할 때만 보여주도록 설정해주는 것이다.

component는 보여줄 component를 정해주는것입니다.

:name? 에서의 ?는 값은 선택적으로 받게끔 설정해주는 것입니다.

Query String

http://localhost:3000/about/park?key="value"&Key2="value2"와 같은 형식에서 key value값들을 가져올 수 있도록 도와주는 라이브러리입니다.

import React from 'react';
import queryString from 'query-string';
const About = ({location, match}) => {
  const query = queryString.parse(location.search);
  console.log(query);
  ...

  //{Key2: ""value2"", key: ""value""}