Tengo rutas como esta:
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> Y el problema es que cuando voy a una página que comienza con /settings , soy redirigido a la página de Profile y no a PROFILE_SETTINGS o ACCOUNT_SETTINGS . Creo que el problema es con /settings/profile porque también obtiene una parte de /profile , pero ¿cómo puedo solucionarlo?
El problema es que dentro del componente Switch solo los componentes Route o Redirect son elementos secundarios válidos. Recuerde que el componente Switch representa el primer hijo <Route> o <Redirect> que coincide con la ubicación, pero ha envuelto sus rutas dentro de ProfileTemplate o SettingsTemplate y, como tal, solo ProfileTemplate se "coincide" y representa. Las rutas envueltas dentro del envoltorio ahora se combinan de manera inclusiva y se representan como si el Switch no estuviera allí en absoluto.
Envuelva los envoltorios en rutas coincidentes para ellos, y luego también envuelva las rutas en un Switch para que coincidan exclusivamente.
<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>elimine el exacto de la Route . asi que
<Route path={routes.PROFILE_SETTINGS} component={ProfileSettings} />