路线 - react-router v5 - 总是点击 NotFound答案

【问题标题】：Routes - react-router v5 - hitting NotFound always路线 - react-router v5 - 总是点击 NotFound
【发布时间】：2021-10-04 23:03:40
【问题描述】：

我正在尝试为我的应用程序添加一个登陆页面，在授权之后。登陆页面后的路由总是命中 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 组件中，我添加了其余路线，这些路线应基于单击着陆页中的链接：

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

【问题讨论】：

尝试从导致LandingPage的Route组件中移除exact属性
如果我这样做，“功能”组件会显示在 LandingPage 下，我已经尝试过了。
如果父路由通过 exact 属性，则不会显示嵌套路由。

标签： reactjs react-router-dom react-router-v5

【解决方案1】：

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

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

【讨论】：