将路由分组为内部组件的 React Router Switch 语句不会转到 Not Found 路由

Question

如果找不到路由，我将尝试呈现“未找到”页面。我将路线分成模块。因此，当我执行 switch 语句时，在 switch 底部添加未找到的页面，例如：

const AccessRoutes = () => {
return (
    <React.Fragment>
        <Route path="/login" exact component={Login}/>
        <Route path="/register" exact component={Register} />
        <Route path="/forgot-password" exact component={ForgotPassword}/>
    </React.Fragment>
       )
}
export default () => {
    return (
     <Switch>
         <AccessRoutes/>
         <Route render={() => <div>Not found</div>}
     </Switch>
    )
}

当您输入不在 AccessRoutes 上的路径时，未找到的路径永远不会匹配，例如 /hey 显示空白屏幕。如果我把路由放在另一个组件中而不将它们包装起来，它就可以工作。

我错过了什么？

Answer 1

也许这个对你有帮助：

export const routes = [
    {
        path: '/login',
        exact: true,
        component: Login
    }, {
        path: '/register',
        exact: true,
        component: Register
    }, {
        path: '/forgot-password',
        exact: true,
        component: ForgotPassword
    }, {
        path: '*',
        component: () => <div>Not found</div>
    }
];

export default () => {
    return (
        <Switch>
            {
                routes.map(
                    (route, index) => <Route key={index} {...route}/>
                )
            }
        </Switch>
    )
}

将路由分组为内部组件的 React Router Switch 语句不会转到 Not Found 路由

React Router Switch statement with routes grouped as component inside does not go to Not Found route

reactjs

react-router

react-router-v4

react-router-dom