子组件中的链接未路由到App.js中定义的组件-React Router v4

Question

我已经在我的App.js文件中包含了路由，并且在我的侧边栏组件中，我具有链接... 当我单击链接时，URL发生了变化，但是该组件未按照App.js的定义进行切换

这是使用子组件中的链接定义路由的正确方法吗？

App.js

function App() {
  return (
    <BrowserRouter>
      <>
        <StyledSidebar />
        <ContentWrapper>
           <Switch>
              <Route path='/' component={AccountPage} />
              <Route path='/information-and-links' component={InfoPage} />
           </Switch>
        </ContentWrapper>
      </>
    </BrowserRouter>
  );
}

Sidebar.js

const StyledSidebar = () => (
  <Sidebar>
      <Menu.Item as={Link} name='information' to='/information-and-links'>
        <Icon name='info' />
        Information & Links
      </Menu.Item>
  </Sidebar>
)