[에러 해결] React Route exact

Error

1) nodedashboardview를 라우팅할 때 exact를 사용하고, 하위 컴포넌트에서 중첩 라우팅 시에 exact를 사용하면 하위 라우팅이 이루어지지 않음.

상위 코드

     <RouteWithLayout
       component={NodeDashboardView}
       // exact
       layout={MainLayout}
       path="/nodedashboard"
     />

하위 코드

                  <Switch>
                    <Route exact path={`${path}/:name`}>
                      {cellIndex !== "00" ? (
                        <CellDetail selectedMac={selectedMac} cellIndex={cellIndex} />
                      ) : (
                        <div>
                          {cellIndex === "00" && bankIndex === "00" ? (
                            <TopDetail selectedMac={selectedMac} />
                          ) : (
                            <BankDetail
                              cellArray={cellArray}
                              selectedMac={selectedMac}
                              bankIndex={bankIndex}
                              tree={tree}
                            />
                          )}
                        </div>
                      )}
                    </Route>
                  </Switch>

정리

1) exact를 사용하면 해당 경로와 완전히 일치하는 경우에만 컴포넌트를 띄우게 된다.
2) 반대로 exact를 설정하지 않은 컴포넌트는 하위 링크가 있어도 컴포넌트를 띄울 수 있게 된다.
3) exact를 명시하지 않고, 나중에 특정 값을 설정하는 /nodedashboard/:mac/:bank/:cell 같은 정확한 값을 요구하는 페이지를 라우트할 때에는 exact를 사용해 정확히 구현해야 한다.

==> 그냥 nodedashbaordview를 라우팅 할 때는 나중에 하위에 새로운 url로 라우팅 하기 때문에 exact를 사용하면 하위에서 다른 경로로 라우팅할 경우 제대로 호출되지 않음.

참고 https://gusrb3164.github.io/web/2020/12/31/react-router/