ra-navigation <AppLocationContext> breaks resources show and edit

What you were expecting: I can open the show/edit view of a ressource without an "element does not exist" notification and an redirect back to the list view.

What happened instead: If you have an layout wrapped inside an AppLocationContext-Component from the ra-navigation package following happens if you try to go to the edit or show view of an ressource:

The edit/show view is rendered, the reload icon on the appbar is spinning
you will be redirected to the list view, notification "element does not exist" is displayed.

What i found out so far: When the AppLocationContext is used following happens: Show-Button of a ressource is clicked -> the dataproviders getList is called -> query.js "Missing queryFn" error is triggered -> the getOne method is called.

Without the usage of the AppLocationContext only the getOne method is called and everything works fine.

Steps to reproduce:

Related code:

// in src/App.js
import * as React from "react";
import {render} from "react-dom";
import {Admin, Resource, ListGuesser, EditGuesser, Layout} from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import {
    AppLocationContext,
    Breadcrumb,
    ResourceBreadcrumbItems
} from "@react-admin/ra-navigation";

const MyLayout = ({children, ...rest}) => {
    return (
        <AppLocationContext>
            <Layout {...rest}>
                <Breadcrumb>
                    <ResourceBreadcrumbItems />
                </Breadcrumb>
                {children}
            </Layout>
        </AppLocationContext>
    );
};

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

render(
    <Admin dataProvider={dataProvider} layout={MyLayout}>
        <Resource name="users" list={ListGuesser} edit={EditGuesser}/>
    </Admin>,
    document.getElementById('root')
);

Preferably, a CodeSandbox forked from
- https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple (v4)
- https://codesandbox.io/s/github/marmelab/react-admin/tree/3.x/examples/simple (v3)
A link to a GitHub repo with the minimal codebase to reproduce the issue

insert short code snippets here

Other information:

Environment

React-admin version: 4.1.3
Last version that did not exhibit the issue (if applicable):
React version: 17.0.2
Browser: Any
Stack trace (in case of a JS error):

Guessed List:

import { Datagrid, EmailField, List, TextField } from 'react-admin';

export const UserList = () => (
    <List>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="name" />
            <TextField source="username" />
            <EmailField source="email" />
            <TextField source="address.street" />
            <TextField source="phone" />
            <TextField source="website" />
            <TextField source="company.name" />
        </Datagrid>
    </List>
); [index.js:30:2416](webpack:///node_modules/ra-ui-materialui/dist/esm/index.js)
Guessed Edit:

import { Edit, SimpleForm, TextInput } from 'react-admin';

export const UserEdit = () => (
    <Edit>
        <SimpleForm>
            <TextInput source="id" />
            <TextInput source="name" />
            <TextInput source="username" />
            <TextInput source="email" />
            <TextInput source="address.street" />
            <TextInput source="phone" />
            <TextInput source="website" />
            <TextInput source="company.name" />
        </SimpleForm>
    </Edit>
); [index.js:7:2267](webpack:///node_modules/ra-ui-materialui/dist/esm/index.js)
Missing queryFn [query.js:356:19](webpack:///node_modules/react-query/es/core/query.js)
    onError query.js:356
    reject retryer.js:67
    run retryer.js:132
Guessed List:

import { Datagrid, EmailField, List, TextField } from 'react-admin';

export const UserList = () => (
    <List>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="name" />
            <TextField source="username" />
            <EmailField source="email" />
            <TextField source="address.street" />
            <TextField source="phone" />
            <TextField source="website" />
            <TextField source="company.name" />
        </Datagrid>
    </List>
);

Content of package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.13.13",
        "@popperjs/core": "^2.10.2",
        "axios": "^0.27.2",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.48",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^13.0.0"
    },
    "dependencies": {
        "@emotion/react": "^11.9.0",
        "@emotion/styled": "^11.8.1",
        "@fontsource/roboto": "^4.5.1",
        "@material-ui/core": "^4.12.3",
        "@material-ui/styles": "^4.11.4",
        "@mui/icons-material": "^5.2.5",
        "@mui/material": "^5.8.3",
        "@react-admin/ra-enterprise": "^6.0.0",
        "@react-admin/ra-navigation": "^4.0.0",
        "@react-admin/ra-rbac": "^4.0.0",
        "final-form": "^4.20.7",
        "prop-types": "^15.7.2",
        "query-string": "^7.1.0",
        "ra-core": "^4.1.3",
        "ra-data-json-server": "^4.1.2",
        "ra-data-simple-rest": "^4.1.2",
        "ra-i18n-polyglot": "^4.1.2",
        "ra-jsonapi-client": "^0.9.0",
        "ra-language-german": "^3.13.5",
        "react-admin": "^4.1.3",
        "react-final-form": "^6.5.7",
        "react-hook-form": "^7.32.0",
        "react-query": "^3.39.1"
    }
}

marmelab / react-admin

ra-navigation <AppLocationContext> breaks resources show and edit #7810