Routes React Router Dom

Question

I hava Routes like this:

export enum routes {
  PROFILE_SETTINGS = "/settings/profile",
  ACCOUNT_SETTINGS = "/settings/account",
  PASSWORD_CHANGE = "/settings/account/password",
  ACCOUNT_DELETE = "/settings/account/delete",
  EMAIL_CHANGE = "/settings/account/email",
  USER_COMMENTS = "/profile/:user/comments",
  USER_PRODUCTS = "/profile/:user/products",
}

<BrowserRouter>
      <ThemeProvider theme={theme}>
        <CommunicatorTemplate>
          <MainTemplate>
            <Switch>
              <ProfileTemplate>
                <Route
                  exact
                  path={routes.USER_COMMENTS}
                  component={UserComments}
                />
                <Route
                  exact
                  path={routes.USER_PRODUCTS}
                  component={UserProducts}
                />
              </ProfileTemplate>
              <SettingsTemplate>
                <Route
                  exact
                  path={routes.PROFILE_SETTINGS}
                  component={ProfileSettings}
                />
                <Route
                  exact
                  path={routes.ACCOUNT_SETTINGS}
                  component={AccountSettings}
                />
                <Route
                  path={routes.PASSWORD_CHANGE}
                  component={PasswordChange}
                />
                <Route path={routes.EMAIL_CHANGE} component={EmailChange} />
                <Route path={routes.ACCOUNT_DELETE} component={AccountDelete} />
              </SettingsTemplate>
            </Switch>
          </MainTemplate>
        </CommunicatorTemplate>
      </ThemeProvider>
    </BrowserRouter>

And the problem is that when I go to any page which starts with /settings I am redirected to the Profile page and not to fe PROFILE_SETTINGS or ACCOUNT_SETTINGS . I think the problem is with /settings/profile because it also get a /profile part, but how can I fix it?

Answer 1

remove the exact from Route . so

<Route
    path={routes.PROFILE_SETTINGS}
    component={ProfileSettings}
    />

Answer 2

The issue is that within the Switch component only Route or Redirect components are valid children. Recall that the Switch component renders the first child <Route> or <Redirect> that matches the location, but you've wrapped your routes inside either the ProfileTemplate or SettingsTemplate , and as such, only the ProfileTemplate is "matched" and rendered. The wrapped routes inside the wrapper are now just inclusively matched and rendered like the Switch wasn't there at all.

Wrap the wrappers in matching routes for them, and then also wrap the routes in a Switch so they are exclusively matched.

<BrowserRouter>
  <ThemeProvider theme={theme}>
    <CommunicatorTemplate>
      <MainTemplate>
        <Switch>
          <Route path={[routes.USER_COMMENTS, routes.USER_PRODUCTS]}>
            <ProfileTemplate>
              <Switch>
                <Route
                  exact
                  path={routes.USER_COMMENTS}
                  component={UserComments}
                />
                <Route
                  exact
                  path={routes.USER_PRODUCTS}
                  component={UserProducts}
                />
              </Switch>
            </ProfileTemplate>
          </Route>
          <Route
            path={[
              routes.PROFILE_SETTINGS,
              routes.ACCOUNT_SETTINGS,
              routes.PASSWORD_CHANGE,
              routes.EMAIL_CHANGE,
              routes.ACCOUNT_DELETE
            ]}
          >
            <SettingsTemplate>
              <Switch>
                <Route
                  exact
                  path={routes.PROFILE_SETTINGS}
                  component={ProfileSettings}
                />
                <Route
                  exact
                  path={routes.ACCOUNT_SETTINGS}
                  component={AccountSettings}
                />
                <Route
                  path={routes.PASSWORD_CHANGE}
                  component={PasswordChange}
                />
                <Route path={routes.EMAIL_CHANGE} component={EmailChange} />
                <Route path={routes.ACCOUNT_DELETE} component={AccountDelete} />
              </Switch>
            </SettingsTemplate>
          </Route>
        </Switch>
      </MainTemplate>
    </CommunicatorTemplate>
  </ThemeProvider>
</BrowserRouter>