react router dom

react router dom

react router dom 검색
서버끄고, 터미널에 npm i react router dom입력

Homepage.js에 가면 Header와 Footer가 있는데, 지운다. Loginpage.js에서도 똑같이 지운다.
모든페이지에 Header와 Footer 가 있다면 App.js에 Header와 Footer 를 붙인다.
그리고 < Homepage.js /> 지운다.

router dom 설치후
1. index.js로 가서 <App /> 를 <BrowserRouter> </BorwserRouter>로 감싼다.
2. App.js로 가서 아래와 같이 해준다. (즉, 라우터는 객체를 바꿔치기 해준다.)
  <Header />
    <Route path="/" exact={true} component={HomPage} />
    <Route path="/login" exact={true} component={LoginPage} />
  <Footer />

클릭했을때, 페이지 경로로 이동하게 해보자.
Header.js로 가서
..생략
const Header = () => {
  return (
    <StyledHeaButtoderDiv backgroundColor="blue">
      <ul>
         <li> 
           <Link to="/">홈</Link> // (a 태그 쓰면 전체를 다시 불러오기때문에 쓰면안된다)

         </li>       
         <li> 
           <Link to="/login">로그인</Link>
         </li>
      </ul>
     </StyledHeaButtoderDiv>
  );
};

페이지끼리 던지고싶다면?
react router에서 props로 넘길 수 있는데, match.params를 쓴다.

App.js로 가서 라우터에 파라미터 입력
<Header />
    <Route path="/" exact={true} component={HomPage} />
    <Route path="/login/:id" exact={true} component={LoginPage} /> //:id입력
  <Footer />

Header.js로 가서
<Link to="/login/10">로그인</Link> // login뒤에 /링크에서 10이라 적고 넘겨준다. 그러면 match.params로 해서 LoginPage.js에서 props로 받는다.

LoginPage.js로 가서
..생략
const LoginPage = (props) => {
  console.log('LoginPage', props);  //Header.js에서 링크로받은 props에는 history(이전페이지, 다른페이지 이동가능한 객체), location, match(params에 {id:"10"}이라는 정보가 있다. 즉, 라우터인 App.js의 경로에서 받을 변수명을 :변수명으로 선언하고, 값은 header.js에서 /뒤에 값을 적어 보내면 LoginPage.js에서 props에 match.params에 값이 있다.
  console.log(props.match.params.id);
  return 
<div>
<button onClick={()=>props.history.go(-1)}>뒤로가기 </button> // 키를 입력하라는 오류뜨는데, Home.js에 추가해줘야하는데, 키(리스트나 컬랙션에 필요)는 그림그릴때, 구조변경하고 배열요소삭제할 때 필요한데 나중에 설명함, 또 props.history.go(-1)에서 history는 구조분할할당을 통해서 자주사용하면 빼두는게 편하다.
위에 const {history} = props; 로 해놓고, onClick에는 history.push("/") 이런식으로..
<Login />;
</div>
};

export default LoginPage;

<Link를 만들고 style을 변경하려면
const StyleHeadLink = styled.Link 로 하면 안되고, const StyleHeadLink = styled(Link)` color:red; `; 로 링크는 상속해서 써야 스타일변경할수 있다.

리액트 디자인 라이브러리 여러개 있다.
프로젝트할 때 부트스트랩을 써라.
npm install react-bootstrap bootstrap 입력

public>index.html에 bootstrap 사용하기 위한 <link~~~~ 소스 상단에 붙인다. 이렇게안하면 아니면 css할때 할대마다 import해서 써야한다.
음, 이거말고, index.js에  import bootstap 소스 를 하는게 더 낫겟네..

그리고 부트스트랩 사이트의 컴포넌트 에서 소스가져다와서 쓰면된다.
그리고 오류뜨면 컨트롤 스페이스 로 import 지정해주면되고, 부트스트랩에 a링크는 못쓴다. 예를들어 <Nav.Link href="/">Home</Nav.Link> 이렇게 되어있으면, 작동안한다.
그러므로  <Link to="/" className="nav-link">홈 </Link> 이런식으로 css로 되어있는 부트스트랩을 className으로 가져와서 .으로 되어있는 부분을 -로 바꿔준다.
찾아보려면 ws3shool에서 확인할수 있다.