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 f.e. 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?
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>
remove the exact from Route. so
<Route
path={routes.PROFILE_SETTINGS}
component={ProfileSettings}
/>