[React] React Router를 적용해도 첫 메인페이지("/") 위치만 표시되는 현상 해결법

Router가 필요한 React 프론트엔드 구현 중 Router를 이동해도 계속 "/" 위치의 컴포넌트만 표시되는 현상이 발생했다.

소스코드는 아래와 같다.

<Router>
  <AppBar>
    <Toolbar>
    <Button onClick={() => route("/")}>Cover</Button>
    <Button onClick={() => route("/Test")}>Test</Button>
    <Switch checked={prefersDarkMode} onChange={() => setPrefersDarkMode(!prefersDarkMode)}></Switch>
    </Toolbar>
  </AppBar>
  <Switch>
    <Route path="/">
    <ConverMaker />
    </Route>
    <Route path="/Test">
    <Test />
    </Route>
  </Switch>
</Router>

이유를 찾을 수 없어 상당히 헤맸다.

해결법은 <Route path="/"></Route>를 가장 하단으로 내리면 된다.

<Router>
  <AppBar>
    <Toolbar>
    <Button onClick={() => route("/")}>Cover</Button>
    <Button onClick={() => route("/Test")}>Test</Button>
    <Switch checked={prefersDarkMode} onChange={() => setPrefersDarkMode(!prefersDarkMode)}></Switch>
    </Toolbar>
  </AppBar>
  <Switch>
    <Route path="/Test">
    <Test />
    </Route>
    <Route path="/">
    <ConverMaker />
    </Route>
  </Switch>
</Router>