'Reactjs Nested Routes not redirecting

All routes work, but my route controller is not redirecting to the "ControlPanelMain" component routes, it just redirects to "CashShopMain", could someone help me with this.

My Route code

export default () => {
   return (
    <Router>
<Route>
  <Main>
    <Switch>
      <Route exact path='/' exact component={Home} />
      <Route exact path='/Register' component={Register} />
      <Route exact path='/Notice' component={Notice} />
      <Route exact path='/Notice/Read' component={NoticeRead} />
      <Route exact path='/Download' component={Download} />
        <CashShopMain>
            <Route path="/Shop">
                <Route exact path='/Shop/:categoryId/:subCategoryId' exact component={CashShopItem} />
                <Route exact path='/Shop/Details' exact component={CashShopItemDetails} />
                <Route exact path='/Shop/Cart' exact component={CashShopCart} />
                <Route exact path='/Shop/FindItem' exact component={CashShopItem} />
            </Route>
        </CashShopMain>
        <ControlPanelMain>
            <Route path="/ControlPanel">
              <PrivateRoute exact path='/ControlPanel/AccountDetails' exact component={ControlPanelAccountDetails} />
              <PrivateRoute exact path='/ControlPanel/ChangePassword' exact component={ControlPanelAccountChangePass} />
              <PrivateRoute exact path='/ControlPanel/Donate' exact component={ControlPanelDonate} />
              <PrivateRoute exact path='/ControlPanel/Transactions' exact component={ControlPanelTransactions} />
              <PrivateRoute exact path='/ControlPanel/GiftCode' exact component={ControlPanelRecoverGiftCode} />
              <PrivateRoute exact path='/ControlPanel/News' exact component={ControlPanelNews} />
              <PrivateRoute exact path='/ControlPanel/News/Add' exact component={ControlPanelNewsAdd} />
              <PrivateRoute exact path='/ControlPanel/News/Edit' exact component={ControlPanelNewsEdit} />
              <PrivateRoute exact path='/ControlPanel/News/Details' exact component={ControlPanelNewsDetails} />
            </Route>
        </ControlPanelMain>
        <Route path='*' exact component={Home} />
    </Switch>
  </Main>
</Route>

reactjs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Reactjs Nested Routes not redirecting

Sources

Related Questions