docs: use correct react router v5 api in example (#1111)

* docs: use correct react router v5 api in example

* docs: add App demonstration in react router v5 example

* docs: make app.js code consistent between examples

* docs: note to use history v4 with react router v5

* docs: remove unneeded line in react router v5 example

Author: Son Nguyen

docs/example-react-router.mdx

@@ -133,8 +133,43 @@ test('rendering a component that uses useLocation', () => {
 
 ## 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
+// app.js
+import React from 'react'
+import {Link, Route, Switch, useLocation} from 'react-router-dom'
+
+const About = () => <div>You are on the about page</div>
+const Home = () => <div>You are home</div>
+const NoMatch = () => <div>No match</div>
+
+export const LocationDisplay = () => {
+  const location = useLocation()
+
+  return <div data-testid="location-display">{location.pathname}</div>
+}
+
+export const App = () => (
+  <div>
+    <Link to="/">Home</Link>
+
+    <Link to="/about">About</Link>
+
+    <Switch>
+      <Route exact path="/" component={Home} />
+
+      <Route path="/about" component={About} />
+
+      <Route component={NoMatch} />
+    </Switch>
+
+    <LocationDisplay />
+  </div>
+)
+```
+
+In your tests, pass the history object as a whole to the Router component.
+**Note:** React Router v5 [only works with History v4](https://github.com/remix-run/history#documentation),
+so make sure you have the correct version of `history` installed.
 
 ```jsx
 // app.test.js
@@ -151,7 +186,7 @@ import {App} from './app'
 test('full app rendering/navigating', async () => {
   const history = createMemoryHistory()
   render(
-    <Router location={history.location} navigator={history}>
+    <Router history={history}>
       <App />
     </Router>,
   )
@@ -170,7 +205,7 @@ test('landing on a bad page', () => {
   const history = createMemoryHistory()
   history.push('/some/bad/route')
   render(
-    <Router location={history.location} navigator={history}>
+    <Router history={history}>
       <App />
     </Router>,
   )