라우터와 레이아웃을 셋팅하자.

react-router-dom

npm install react-router-dom 

// index.js 
ReactDOM.render(
  <BrowserRouter> // BrowserRouter로 App컴포넌트를 감싸준다.
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

// Navigation.js
 <Link to="/portfolio/contact" style={{ textDecoration: "none" }}>
   

styled-component 및 라우터 분기처리

// Contents.js
import React, { useState, useEffect } from "react";
import { withRouter } from "react-router-dom";
import styled from "styled-components";

import { Home, About, Project, Contact } from "../pages";

const ContentStyled = styled.div`
  border: 5px solid pink;
  margin: 5px;
  height: 1000px;
`;

const Content = withRouter((props) => {
  const [currentPage, setCurrentPage] = useState(<Home />);

  let path = props.location.pathname.slice(10); // /about, /project..

  useEffect(() => {
    // 현재 라우터를 확인하는 메서드가 필요 => 라우터 경로를 확인하고,
    //  setCurrentPage를 경로로 설정해준다.
    if (path === "") {
      setCurrentPage(<Home />);
    } else if (path === "/about") {
      setCurrentPage(<About />);
    } else if (path === "/project") {
      setCurrentPage(<Project />);
    } else if (path === "/contact") {
      setCurrentPage(<Contact />);
    }
  }, [path]);

  return (
    <>
      <ContentStyled>
        <div>{currentPage}</div>
      </ContentStyled>
    </>
  );
});

export default Content;

기록

1. 레이아웃을 간단하게 짰다. 헤더와 컨텐츠 영역만 틀을 짜고, 라우터 경로에 따라
   컨텐츠의 영역에서 해당 라우터의 화면을 뿌려주고 싶었다.

   withRouter로 감싸서 Route들의 locations, history..등을 받을 수 있었다.

2. Navigation에서 Link를 타고 들어갔을 때, useEffect를 실행하면서 경로를 받아오고 그에 따른 페이지를 컨텐츠 영역에 뿌려준다.

3. pathname을 가지고 라우터 분기 처리에 대해 더 간단히, 깔끔하게 할 수 있는 방법을 찾아보고 싶다.

4. react-router-dom location

   https://stackoverflow.com/questions/47298325/react-router-dom-getting-props-location-from-within-browserrouter-component

5. What is difference between React router and react router Dom?

   react-router-dom is made for "Web application" and react-router-native is made for "react native mobile apps". react-router-dom & react-router-native uses react-router at core. Extra Benefit of react-router-redux is you can keep your router in sync with application state.

   https://stackoverflow.com/questions/43185222/what-is-difference-between-react-router-4-0-react-router-dom-and-react-router-r/50003311