路由 React Router Dom

Question

我有这样的路线：

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>

问题是，当我转到任何以 /settings 开头的页面时，我会被重定向到 Profile 页面而不是 f.e. PROFILE_SETTINGS 或 ACCOUNT_SETTINGS。我认为问题出在/settings/profile，因为它也有/profile 部分，但我该如何解决？

Answer 1

问题在于，在 Switch 组件中，只有 Route 或 Redirect 组件是有效的子组件。回想一下，Switch 组件会渲染与位置匹配的第一个子 <Route> 或 <Redirect>，但您已将路线包裹在 ProfileTemplate 或 SettingsTemplate 中，因此，只有 ProfileTemplate是“匹配的”并呈现。包装器内的包装路线现在只是包含性匹配和渲染，就像 Switch 根本不存在一样。

将包装器包装在匹配的路由中，然后将路由包装在Switch 中，以便它们完全匹配。

<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>

Answer 2

从Route 中删除确切的内容。所以

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