路由 - react-router v5 - 总是点击 NotFound

问题描述

我正在尝试为我的应用程序添加一个登陆页面，在授权之后。登陆页面后的路线总是点击 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>
    );
};

在登陆页面组件中，我添加了其余的路由，这些路由应该基于点击登陆页面的链接：

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 页面。

请告诉我我做错了哪一部分？

TIA

解决方法

我可以通过更改路线来解决它直到“功能”路线：

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