Updating when the App component is included in a Route does not trigger a PUT request

What you were expecting: Saving on the edit component view should trigger a PUT request.

What happened instead: No PUT request is triggered. Moreover:

• with or without undoable={false}, the undo popup does not show
• the request seems to be queued and can be triggered by asking a deletion

Steps to reproduce:

See the CodeSandbox https://codesandbox.io/s/great-goldstine-h2u1n

1. Click on one of the rows
2. Update it and save it
3. Notice how no undo popup shows
4. Delete the ressource
5. Notice that the previous update is triggered with the query

Related code:

// in src/index.js
/* eslint react/jsx-key: off */
import React from "react";
import { Admin, Resource } from "react-admin"; // eslint-disable-line import/no-unresolved
import { render } from "react-dom";
import Layout from "./Layout";
import posts from "./posts";
import jsonServerProvider from "ra-data-json-server";
import { BrowserRouter as Router } from "react-router-dom";
import { Route, Switch } from "react-router-dom";

render(
  <Router>
    <Switch>
      <Route
        path="/"
        exact
        component={() => (
          <Admin
            dataProvider={jsonServerProvider(
              "https://my-json-server.typicode.com/typicode/demo/"
            )}
            title="Example Admin"
            layout={Layout}
          >
            {permissions => [<Resource name="posts" {...posts} />]}
          </Admin>
        )}
      />
    </Switch>
  </Router>,
  document.getElementById("root")
);


// in src/post.js
import React from 'react';
import {
    Datagrid,
    Edit,
    List,
    SimpleForm,
    TextField,
    TextInput,
} from 'react-admin';

export const PostList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="title" />
        </Datagrid>
    </List>
);

export const PostEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <TextInput disabled label="Id" source="id" />
            <TextInput source="title" />
        </SimpleForm>
    </Edit>
);

Other information:

• The issue seems similar to this SO question: https://stackoverflow.com/questions/59716618/react-admin-simpleform-component-doesnt-trigger-the-update-action-in-the-da
• I don’t see how this differs from what is in the docs
• Could this be related to components no longer receiving dispatch in the upgrade somehow? I tried to browse the react admin code but could not find my way through.
• React Admin is embedded in a React app that also uses a redux / redux saga, which might cause conflicts

Environment

• React-admin version: 3.2.2
• Last version that did not exhibit the issue (if applicable): before v3
• React version: 16.12.0
• React REST Data Provider version: 3.2.2
• Browser: observed on firefox and chrome
• Stack trace (in case of a JS error): /

[7hibault]

Thanks for taking the time to look into it.

However it seems to me that this is an important feature for users who want to include react-admin in another redux application. If you already have an app in which you want to include react-admin, there’s a great chance that this app uses react router. If so, how are you supposed to do it?

[fzaninotto]

OK, so the problem comes from including the react-admin app in another Router. This is not supported by react-admin. If you manage to make it work, great! Otherwise, it’s not something we want to spend time on, so I’ll close this issue.

As a side note, maybe sharing the history between your router and the react-admin router will help.