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