Оператор React Router Switch с маршрутами, сгруппированными внутри компонента, не переходит к маршруту Not Found

Question

Я пытаюсь отобразить страницу Not Found, если маршруты не найдены.У меня есть маршруты, разделенные как модули.Поэтому, когда я выполняю инструкцию 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>
    )
}