路线 - react-router v5 - 总是命中 NotFound

Question

我正在尝试为我的应用程序添加一个登陆页面。 授权后。 着陆页后的路线总是命中 NotFound 路线。 我无法弄清楚原因。

最初的路线是：

const Initial = ({ settings }) => {
  const store = setupStore(reducers, { settings });
  return (
    <Provider store={store}>
      <AuthProvider appSettings={settings}>
        <Router basename={settings.AppContextPath}>
          <MainLayout>
            <Switch>
              <Route
                path={LOGIN_URL}
                component={Login}
              />
              <Route
                path={LOGOUT_URL}
                component={Logout}
              />
              <Route
                exact={true}
                path={SILENT_RENEW_URL}
                component={SilentRenew}
              />
              <AuthenticatedRoute>
                <App>
                  <Switch>
                    <Route
                      exact path="/"
                      component={LandingPage}
                    />
                    <Route component={NotFound} />
                  </Switch>
                </App>
              </AuthenticatedRoute>
            </Switch>
          </MainLayout>
        </Router>
      </AuthProvider>
    </Provider>
  );
};

在LandingPage组件中，我添加了 rest 条路线，这些路线应基于点击 Landing Page 中的Link ：

const FeatureRoutes = () => {
  return (
    <Switch>
      <Route
        path={`/:Id/feature1`}
        component={Feature1}
      />
      <Route
        path={`/:Id/feature2`}
        component={Feature2}
      />            
      <Route exact path={`/:Id`} component={Features} />
    </Switch>
  );
};

export default FeatureRoutes;

单击该链接可使用"/:id"正确导航到 url，但它显示NotFound页面。

请让我知道我做错了哪一部分。

Answer 1

我可以通过更改路线将其解决到 go 直到“功能”路线：

<AuthProvider appSettings={settings}>
                <Router basename={settings.AppContextPath}>
                    <MainLayout>
                        <Switch>
                            Route
                                path={LOGIN_URL}
                                component={Login}
                            />
                            <Route
                                path={LOGOUT_URL}
                                component={Logout}
                            />
                            <Route
                                exact={true}
                                path={SILENT_RENEW_URL}
                                component={SilentRenew}
                            />
                            <AuthenticatedRoute>
                                <App>
                                    <Switch>
                                        <Route
                                            exact path="/"
                                            component={LandingPage}
                                        />
                                        <Route
                                            path={'/:Id'}
                                            component={FeatureRoutes}
                                        />
                                    </Switch>
                                </App>
                            </AuthenticatedRoute>
                        </Switch>
                    </MainLayout>
                </Router>
            </AuthProvider>
        </Provider>
    );
};

我将 NotFound 路线移到了 FeatureRoutes 中。