Merge pull request #3825 from thclark/next

Unified imports of routing components to react-router-dom

docs/Admin.md

@@ -368,7 +368,7 @@ export default App;
 
 ## `customRoutes`
 
-To register your own routes, create a module returning a list of [react-router](https://github.com/ReactTraining/react-router) `<Route>` component:
+To register your own routes, create a module returning a list of [react-router-dom](https://reacttraining.com/react-router/web/guides/quick-start) `<Route>` component:
 
 ```jsx
 // in src/customRoutes.js

docs/CreateEdit.md

@@ -261,9 +261,9 @@ Alternately, you may need to prepopulate a record based on a *related* record. F
 
 **Note**  `<CloneButton>` is designed to be used in an edit view `<Actions>` component, not inside a `<Toolbar>`. The `Toolbar` is basically for submitting the form, not for going to another resource.
 
-By default, the `<Create>` view starts with an empty `record`. However, if the `location` object (injected by [react-router](https://reacttraining.com/react-router/web/api/location)) contains a `record` in its `state`, the `<Create>` view uses that `record` instead of the empty object. That's how the `<CloneButton>` works behind the hood.
+By default, the `<Create>` view starts with an empty `record`. However, if the `location` object (injected by [react-router-dom](https://reacttraining.com/react-router/web/api/location)) contains a `record` in its `state`, the `<Create>` view uses that `record` instead of the empty object. That's how the `<CloneButton>` works behind the hood.
 
-That means that if you want to create a link to a creation form, presetting *some* values, all you have to do is to set the location `state`. React-router provides the `<Link>` component for that:
+That means that if you want to create a link to a creation form, presetting *some* values, all you have to do is to set the location `state`. `react-router-dom` provides the `<Link>` component for that:
 
 {% raw %}
 ```jsx

docs/CustomApp.md

@@ -11,7 +11,7 @@ The `<Admin>` tag is a great shortcut to be up and running with react-admin in m
 
 Fortunately, the `<Admin>` component detects when it's used inside an existing Redux `<Provider>`, and skips its own store initialization. That means that react-admin will work out of the box inside another redux application - provided, of course, the store is compatible.
 
-Beware that you need to know about [redux](http://redux.js.org/), [react-router](https://github.com/reactjs/react-router), and [redux-saga](https://github.com/yelouafi/redux-saga) to go further.
+Beware that you need to know about [redux](http://redux.js.org/), [react-router-dom](https://reacttraining.com/react-router/web/guides/quick-start), and [redux-saga](https://github.com/yelouafi/redux-saga) to go further.
 
 React-admin requires that the redux state contains at least 2 reducers: `admin` and `router`. You can add more, or replace some of them with your own, but you can't remove or rename them. As it relies on `connected-react-router` and `redux-saga`, react-admin also expects the store to use their middlewares.
 

examples/demo/src/reviews/ReviewList.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useCallback } from 'react';
 import classnames from 'classnames';
 import { BulkDeleteButton, List } from 'react-admin';
-import { Route, useHistory } from 'react-router';
+import { Route, useHistory } from 'react-router-dom';
 import { Drawer, useMediaQuery, makeStyles } from '@material-ui/core';
 import BulkAcceptButton from './BulkAcceptButton';
 import BulkRejectButton from './BulkRejectButton';

examples/simple/src/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Admin, Resource } from 'react-admin'; // eslint-disable-line import/no-unresolved
 import { render } from 'react-dom';
-import { Route } from 'react-router';
+import { Route } from 'react-router-dom';
 import { reducer as tree } from 'ra-tree-ui-materialui';
 
 import authProvider from './authProvider';

packages/ra-core/src/auth/Authenticated.spec.tsx

@@ -7,7 +7,7 @@ import AuthContext from './AuthContext';
 import renderWithRedux from '../util/renderWithRedux';
 import { showNotification } from '../actions/notificationActions';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router';
+import { Router } from 'react-router-dom';
 
 describe('<Authenticated>', () => {
     afterEach(cleanup);

packages/ra-core/src/auth/useAuthenticated.spec.tsx

@@ -7,7 +7,7 @@ import AuthContext from './AuthContext';
 import renderWithRedux from '../util/renderWithRedux';
 import { showNotification } from '../actions/notificationActions';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router';
+import { Router } from 'react-router-dom';
 
 describe('useAuthenticated', () => {
     afterEach(cleanup);

packages/ra-core/src/auth/useLogin.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import useAuthProvider, { defaultAuthParams } from './useAuthProvider';
-import { useLocation, useHistory } from 'react-router';
+import { useLocation, useHistory } from 'react-router-dom';
 
 /**
  * Get a callback for calling the authProvider.login() method

packages/ra-core/src/auth/useLogout.ts

@@ -3,7 +3,7 @@ import { useDispatch, useStore } from 'react-redux';
 
 import useAuthProvider, { defaultAuthParams } from './useAuthProvider';
 import { clearState } from '../actions/clearActions';
-import { useHistory, useLocation } from 'react-router';
+import { useHistory, useLocation } from 'react-router-dom';
 
 /**
  * Get a callback for calling the authProvider.logout() method,

packages/ra-core/src/controller/useCreateController.ts

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import inflection from 'inflection';
 import { parse } from 'query-string';
 import { Location } from 'history';
-import { match as Match } from 'react-router';
+import { match as Match } from 'react-router-dom';
 
 import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
 import { useCreate } from '../dataProvider';

packages/ra-core/src/controller/useListParams.ts

@@ -16,7 +16,7 @@ import { changeListParams, ListParams } from '../actions/listActions';
 import { Sort, ReduxState } from '../types';
 import removeEmpty from '../util/removeEmpty';
 import removeKey from '../util/removeKey';
-import { useHistory } from 'react-router';
+import { useHistory } from 'react-router-dom';
 
 interface ListParamsOptions {
     resource: string;

packages/ra-core/src/sideEffect/useRedirect.ts

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { Identifier, Record } from '../types';
 import resolveRedirectTo from '../util/resolveRedirectTo';
 import { refreshView } from '../actions/uiActions';
-import { useHistory } from 'react-router';
+import { useHistory } from 'react-router-dom';
 
 type RedirectToFunction = (
     basePath?: string,

packages/ra-core/src/types.ts

@@ -1,5 +1,9 @@
 import { ReactNode, ReactElement, ComponentType } from 'react';
-import { RouteProps, RouteComponentProps, match as Match } from 'react-router';
+import {
+    RouteProps,
+    RouteComponentProps,
+    match as Match,
+} from 'react-router-dom';
 import { Location } from 'history';
 
 import { WithPermissionsChildrenParams } from './auth/WithPermissions';

packages/ra-core/src/util/TestContext.tsx

@@ -3,7 +3,7 @@ import { createStore, Store } from 'redux';
 import { Provider } from 'react-redux';
 import merge from 'lodash/merge';
 import { createMemoryHistory, History } from 'history';
-import { Router } from 'react-router';
+import { Router } from 'react-router-dom';
 
 import createAdminStore from '../createAdminStore';
 import { convertLegacyDataProvider } from '../dataProvider';

packages/ra-ui-materialui/src/auth/Login.tsx

@@ -16,7 +16,8 @@ import {
 } from '@material-ui/core';
 import { ThemeProvider } from '@material-ui/styles';
 import LockIcon from '@material-ui/icons/Lock';
-import { StaticContext, useHistory } from 'react-router';
+import { StaticContext } from 'react-router';
+import { useHistory } from 'react-router-dom';
 import { useCheckAuth } from 'ra-core';
 
 import defaultTheme from '../defaultTheme';

packages/ra-ui-materialui/src/detail/TabbedShowLayout.js

@@ -5,7 +5,7 @@ import { Route } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 
 import TabbedShowLayoutTabs, { getTabFullPath } from './TabbedShowLayoutTabs';
-import { useRouteMatch } from 'react-router';
+import { useRouteMatch } from 'react-router-dom';
 
 const sanitizeRestProps = ({
     children,

packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js

@@ -1,7 +1,7 @@
 import React, { Children, cloneElement, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import Tabs from '@material-ui/core/Tabs';
-import { useLocation, useRouteMatch } from 'react-router';
+import { useLocation, useRouteMatch } from 'react-router-dom';
 
 export const getTabFullPath = (tab, index, baseUrl) =>
     `${baseUrl}${

packages/ra-ui-materialui/src/field/ReferenceArrayField.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import expect from 'expect';
 import { render, cleanup } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 
 import { ReferenceArrayFieldView } from './ReferenceArrayField';
 import TextField from './TextField';

packages/ra-ui-materialui/src/field/ReferenceField.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import expect from 'expect';
 import { render, cleanup } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { renderWithRedux, DataProviderContext } from 'ra-core';
 
 import ReferenceField, { ReferenceFieldView } from './ReferenceField';

packages/ra-ui-materialui/src/form/TabbedForm.js

@@ -16,7 +16,7 @@ import get from 'lodash/get';
 import getFormInitialValues from './getFormInitialValues';
 import Toolbar from './Toolbar';
 import TabbedFormTabs, { getTabFullPath } from './TabbedFormTabs';
-import { useRouteMatch, useLocation } from 'react-router';
+import { useRouteMatch, useLocation } from 'react-router-dom';
 
 const useStyles = makeStyles(theme => ({
     errorTabButton: { color: theme.palette.error.main },

packages/ra-ui-materialui/src/form/TabbedForm.spec.js

@@ -1,6 +1,6 @@
 import { cleanup } from '@testing-library/react';
 import React, { createElement } from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { renderWithRedux } from 'ra-core';
 
 import TabbedForm, { findTabsWithErrors } from './TabbedForm';

packages/ra-ui-materialui/src/form/TabbedFormTabs.js

@@ -1,7 +1,7 @@
 import React, { Children, cloneElement, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import Tabs from '@material-ui/core/Tabs';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
 export const getTabFullPath = (tab, index, baseUrl) =>
     `${baseUrl}${

packages/ra-ui-materialui/src/form/TabbedFormTabs.spec.js

@@ -3,7 +3,7 @@ import { render, cleanup } from '@testing-library/react';
 
 import TabbedFormTabs from './TabbedFormTabs';
 import FormTab from './FormTab';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 
 describe('<TabbedFormTabs />', () => {
     afterEach(cleanup);

packages/ra-ui-materialui/src/layout/Layout.js

@@ -2,7 +2,7 @@ import React, { Component, createElement, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { withRouter } from 'react-router';
+import { withRouter } from 'react-router-dom';
 import {
     createMuiTheme,
     withStyles,

packages/ra-ui-materialui/src/list/DatagridRow.js

@@ -16,7 +16,7 @@ import isEqual from 'lodash/isEqual';
 
 import DatagridCell from './DatagridCell';
 import ExpandRowButton from './ExpandRowButton';
-import { useHistory } from 'react-router';
+import { useHistory } from 'react-router-dom';
 
 const computeNbColumns = (expand, children, hasBulkActions) =>
     expand

packages/ra-ui-materialui/src/list/DatagridRow.spec.js

@@ -5,7 +5,7 @@ import { renderWithRedux, linkToRecord } from 'ra-core';
 
 import DatagridRow from './DatagridRow';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router';
+import { Router } from 'react-router-dom';
 
 const TitleField = ({ record }) => <span>{record.title}</span>;
 const ExpandPanel = () => <span>expanded</span>;

packages/ra-ui-materialui/src/list/List.spec.js

@@ -4,7 +4,7 @@ import { cleanup } from '@testing-library/react';
 import { renderWithRedux } from 'ra-core';
 import { ThemeProvider } from '@material-ui/styles';
 import { createMuiTheme } from '@material-ui/core/styles';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 
 import defaultTheme from '../defaultTheme.ts';
 import List, { ListView } from './List';