use react router history.push instead of window.history.replaceState (#154)

* use react router history.push instead of window.history.replaceState

* also use history.push on the DEFAULT_REDIRECT_CALLBACK

Author: groffcole

01-Login/src/App.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { Router, Route, Switch } from "react-router-dom";
 import { Container } from "reactstrap";
 
 import PrivateRoute from "./components/PrivateRoute";
@@ -9,6 +9,7 @@ import Footer from "./components/Footer";
 import Home from "./views/Home";
 import Profile from "./views/Profile";
 import { useAuth0 } from "./react-auth0-spa";
+import history from "./utils/history";
 
 // styles
 import "./App.css";
@@ -25,7 +26,7 @@ const App = () => {
   }
 
   return (
-    <Router>
+    <Router history={history}>
       <div id="app" className="d-flex flex-column h-100">
         <NavBar />
         <Container className="flex-grow-1 mt-5">

01-Login/src/index.js

@@ -5,11 +5,10 @@ import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 import { Auth0Provider } from "./react-auth0-spa";
 import config from "./auth_config.json";
+import history from "./utils/history";
 
 const onRedirectCallback = appState => {
-  window.history.replaceState(
-    {},
-    document.title,
+  history.push(
     appState && appState.targetUrl
       ? appState.targetUrl
       : window.location.pathname

01-Login/src/react-auth0-spa.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useContext } from "react";
 import createAuth0Client from "@auth0/auth0-spa-js";
+import history from "./utils/history";
 
 const DEFAULT_REDIRECT_CALLBACK = () =>
-  window.history.replaceState({}, document.title, window.location.pathname);
+  history.push(window.location.pathname);
 
 export const Auth0Context = React.createContext();
 export const useAuth0 = () => useContext(Auth0Context);

01-Login/src/utils/history.js

@@ -0,0 +1,2 @@
+import { createBrowserHistory } from "history";
+export default createBrowserHistory();

02-Calling-an-API/src/App.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { Router, Route, Switch } from "react-router-dom";
 import { Container } from "reactstrap";
 
 import PrivateRoute from "./components/PrivateRoute";
@@ -10,6 +10,7 @@ import Home from "./views/Home";
 import Profile from "./views/Profile";
 import ExternalApi from "./views/ExternalApi";
 import { useAuth0 } from "./react-auth0-spa";
+import history from "./utils/history";
 
 // styles
 import "./App.css";
@@ -26,7 +27,7 @@ const App = () => {
   }
 
   return (
-    <Router>
+    <Router history={history}>
       <div id="app" className="d-flex flex-column h-100">
         <NavBar />
         <Container className="flex-grow-1 mt-5">

02-Calling-an-API/src/index.js

@@ -5,11 +5,10 @@ import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 import { Auth0Provider } from "./react-auth0-spa";
 import config from "./auth_config.json";
+import history from "./utils/history";
 
 const onRedirectCallback = appState => {
-  window.history.replaceState(
-    {},
-    document.title,
+  history.push(
     appState && appState.targetUrl
       ? appState.targetUrl
       : window.location.pathname

02-Calling-an-API/src/react-auth0-spa.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useContext } from "react";
 import createAuth0Client from "@auth0/auth0-spa-js";
+import history from "./utils/history";
 
 const DEFAULT_REDIRECT_CALLBACK = () =>
-  window.history.replaceState({}, document.title, window.location.pathname);
+  history.push(window.location.pathname);
 
 export const Auth0Context = React.createContext();
 export const useAuth0 = () => useContext(Auth0Context);

02-Calling-an-API/src/utils/history.js

@@ -0,0 +1,2 @@
+import { createBrowserHistory } from "history";
+export default createBrowserHistory();