동행큐브
729
2021-02-09 16:55:06
2
164

리액트에서 사이드바 라우팅 할때 질문 있습니다.


안녕하세요. 리액트로 사이드바 작성중에 질문이 있어 올려봅니다. 현재 페이지 이동은 react-router-dom의 Link 태그를 사용하고 있습니다. 

아래는 해당 코드입니다. 


<SidebarContent>
        {menuList.map((menu, index) => {
          return (
            <Menu iconShape='circle' key={index}>
              <SubMenu title={menu.name} icon={<CIcon name={menu.icon}/>}>
              {menu._children.map((item, index) => {
                return (
                  <MenuItem key={index} active={item.to === location} icon={<CIcon name={item.icon}/>} >
                    {item.name}
                    <Link to={item.to}/>
                  </MenuItem>
                )
              })}
              </SubMenu>
            </Menu>)
        })
        }
      </SidebarContent>


라우팅은 잘 되는데 문제가 만약 현재 위치한 페이지가 /users라면 /users를 가리키는 링크를 클릭해도 변하는게 없습니다. 


<CContainer fluid>
        <Suspense fallback={loading}>
          <Switch>
            {routes.map((route, idx) => {
              return route.component && (
                <Route
                  key={idx}
                  path={route.path}
                  exact={route.exact}
                  name={route.name}
                  render={props => (
                    <CFade>
                      <route.component {...props} />
                    </CFade>
                  )}/>
              )
            })}
            <Redirect from="/" to="/main"/>
          </Switch>
        </Suspense>
      </CContainer>


메인 컨텐츠 부분은 위 코드와 같이 Fade 효과를 줬기때문에 다른 페이지로 넘어갈 때는 fade 효과가 발생합니다. 하지만 현재 페이지와 같은 링크를 눌러도 fade 효과가 발생하지 않더군요. useEffect()로 페이지 시작할때 실행하는 함수도 동작하지 않고요. 

어떻게 하면 컴포넌트를 다시 렌더링해서 Fade 효과도 발생하고 useEffect()도 실행될까요?

원래 SPA에서는 이렇게 동작하는건가요?

0
  • 답변 2

  • 킁킁탐정
    844
    2021-02-09 19:55:22

    다음의 답변을 참조해보세요.

    https://stackoverflow.com/questions/38839510/forcing-a-react-router-link-to-load-a-page-even-if-were-already-on-that-page

  • 동행큐브
    729
    2021-02-10 12:28:34

    구글링 아무리 해도 이런 결과 안나오던데...키워드가 잘못된건가.. ㅠㅠ

    감사합니다! 

  • 로그인을 하시면 답변을 등록할 수 있습니다.