TIL. route

Today I learn

disappear exact component in routes

전체 페이지에서 전역으로 사용하는 Footer component 를 평가페이지에서는 안보이게 설정을 했어야했다.

첫번째로 생각한 방법은 object 로 속성값을 만들어서 Routes에서 평가(evaluating) component로 전달해주고 그 속성값에 따라 display : none 해주면 되지 않을까 라는 가설을 세우고 시도해봤지만 아직 성공하지 못했고 계속 도전중이다.

두번째는 구글링해서 찾아본 방법인데 Router안을 Switch 대신 div로 감싸고 Route가 render될때 조건을 주는 방법이었다.

이마저도 성공을 못했으면 각 페이지에서..Footer component를 import해서 사용하는 방법이 나올뻔했ㄷ...ㅏ

class Routes extends Component {
  render() {
    return (
      <>
        <Router>
          <Nav />
          <div>
            {/* <Switch> */}
            <Route exact path="/" component={Home} />
            <Route exact path="/detail/:productId" component={Detail} />
            <Route exact path="/evaluating" component={Evaluating} />
            <Route exact path="/evaluating/:id" component={Evaluating} />
            <Route
              Route
              path="/"
              render={props =>
                props.location.pathname !== '/evaluating' && <Footer />
              }
            />
            {/* </Switch> */}
          </div>
        </Router>
      </>
    );
  }
}

이 방법은 사실 나 조차도 써도 되는지 안되는지 확신이서지 않았다. 나는 당연히 Switch를 사용해왔는데 그 대신 div로 감싸고 이렇게 사용해도 괜찮은 걸까?

우선 공부해서 알아보기 전에 내가 사용한 방법은 이러했고, 내가 원래 사용하고 싶었던 방법인 객체로 속성값을 만들어서 Routes에서 footer component로 넘겨준다음 특정 조건에서만 render하게 되면 되지않을까 하는 생각!

곧 실현 되도록 할것이다.