[React] React Router DOM

 

SPA 방식에서는 모든 페이지가 하나의 URL을 가질 수 있으나 하나의 페이지 안에서 이렇게 모든 동작이 일어난다면 브라우저의 북마크 기능이나, 뒤로 가기 혹은 앞으로 가기 기능을 이용하지 못하기에 불편한 점이 있다. 이런 문제를 해결할 수 있도록 SPA를 유지하면서도, 페이지(코드)별로 URL을 부여할 수 있는 기술이 React Router이다. 

 

• Route

길, 경로라는 의미를 지니고 있는 단어, 서울에서 부산으로 가기 위한 여러 갈래가 있듯이 네트워크 상에서도 데이터 패킷이 목적까지 가기 위한 여러 라우트(경로)들이 존재한다.

 

• Router

라우터는 데이터패킷이 출발지에서 목적지까지 이동하기 위한 라우터를 찾고, 데이터 패킷도 어떤 라우트(경로)로 전송할 것인지 정하는 역할을 한다.

 

• Routing

라우터가 발견한 라우트 중 가장 빠른 경로를 찾아내는 매커니즘이다.

(HTTP 리퀘스트를 어떤 특정한 페이지로 연결할껀지에 대한 매커니즘)

 

 

이번 프로젝트에서 react-router-dom 5.3.3버전 사용하여 url 17개 구현하였다. 

... 생략
  return (
    <div className="app">
      <BrowserRouter>
        <Route exact path="/">
          <Layout initialCartItem={initialCartItem} children={<Main1 isLogin={isLogin} store={store} />}/>
        </Route>
        <Route path="/blog">
          <LayoutBlog children={<Blog />}/>
        </Route>
        <Route path="/yourblog">
          <LayoutBlog children={<Yourblog blogData={blogData} />}/>
        </Route>
        <Route path="/myblog">
          <LayoutBlog children={<MyBlog FileInput={FileInput} ProfileInput={ProfileInput} blogData={blogData} userId={userId}/>}/>
        </Route>
        <Route path="/my">
          <LayoutMy children={<Update FileInput={FileInput} serverURL={serverURL}/>}/>
        </Route>
        <Route path="/login">
          <Layout children={<Login loginCallBack={loginCallBack} serverURL={serverURL} />}/>
        </Route>
        <Route path="/signup">
          <Layout initialCartItem={initialCartItem} children={<SignUp serverURL={serverURL}/>}/>
        </Route>
        <Route path="/activity">
          <Layout initialCartItem={initialCartItem} children={<Activity/>}/>
        </Route>
        <Route path="/restaurant">
          <Layout initialCartItem={initialCartItem} children={<Restaurant/>}/>
        </Route>
        <Route path="/detail">
          <Layout initialCartItem={initialCartItem} children={<Detail addToCart={addToCart} />}/>
        </Route>
        <Route path="/detail2">
          <Layout initialCartItem={initialCartItem} children={<Detail2/>}/>
        </Route>
        <Route path="/navigation">
          <Layout initialCartItem={initialCartItem} children={<Navigation/>}/>
        </Route>
        <Route path="/cart">
          <Layout initialCartItem={initialCartItem} children={<Cart serverURL={serverURL} userId={userId} store={store} />}/>
        </Route>
        <Route path="/write">
          <Layout initialCartItem={initialCartItem} children={<Write FileInput={FileInput} onCreate={onCreate} />}/>
        </Route>
        <Route path="/review">
          <Layout initialCartItem={initialCartItem} children={<Review/>}/>
        </Route>
        <Route path="/order">
          <Layout initialCartItem={initialCartItem} children={<Order/>}/>
        </Route>
      <Route path="/payment">
          <Layout initialCartItem={initialCartItem} children={<Pay/>}/>
        </Route>
      </BrowserRouter>
    </div>
);
}

 

고객 아이디나 액티비티 상품, 맛집 정보 별 노출되는 페이지는 아래와 같이 usehistory 사용하여 push될 때 path를 기본적인 url + 뒤에 식별할 수 있는 데이터를 붙여 구분하였다. 

        <div className="productUnit-frame">
            <div className="productUnit-img" ref={fid} id={item.id} onClick={()=> 
            {history.push({
            pathname: view_url,
            state: {post:item}
        })}}>