Update Router props based on react-router-dom v6 (testing-library#981)

* Update Router props based on react-router-dom v6 Since react-router-dom v6, there's no history object on Router anymore. Instead, the objects navigator and location needs to be used. Reference: https://stackoverflow.com/questions/69859509/cannot-read-properties-of-undefined-reading-pathname-when-testing-pages-in * Add info text and * Notify about React Router v6 in example and have a separate short example for v5

Author: mohetti

docs/example-react-router.mdx

@@ -3,6 +3,8 @@ id: example-react-router
 title: React Router
 ---
 
+The example below now supports React Router v6.
+
 ```jsx
 // app.js
 import React from 'react'
@@ -58,7 +60,7 @@ import {App, LocationDisplay} from './app'
 test('full app rendering/navigating', async () => {
  const history = createMemoryHistory()
  render(
- <Router history={history}>
+ <Router location={history.location} navigator={history}>
  <App />
  </Router>,
  )
@@ -77,7 +79,7 @@ test('landing on a bad page', () => {
  const history = createMemoryHistory()
  history.push('/some/bad/route')
  render(
- <Router history={history}>
+ <Router location={history.location} navigator={history}>
  <App />
  </Router>,
  )
@@ -90,7 +92,7 @@ test('rendering a component that uses useLocation', () => {
  const route = '/some-route'
  history.push(route)
  render(
- <Router history={history}>
+ <Router location={history.location} navigator={history}>
  <LocationDisplay />
  </Router>,
  )
@@ -158,3 +160,17 @@ test('rendering a component that uses useLocation', () => {
  expect(screen.getByTestId('location-display')).toHaveTextContent(route)
 })
 ```
+
+## Testing Library and React Router v5 
+
+In React Router v5, you need to pass the history object as a whole to the Route component.
+
+```jsx
+test('full app rendering/navigating', () => {
+ const history = createMemoryHistory()
+ render(
+ <Router history={history} />
+ <App />
+ </Router>,
+ )
+ ```