upgrade react-router

spec/dummy/app/views/shared/_header.erb

@@ -68,9 +68,6 @@
   <li>
     <%= link_to "Manually Rendered Component", client_side_manual_render_path %>
   </li>
-  <li>
-    <%= link_to "Deferred Rendering of Async Route", deferred_render_path %>
-  </li>
   <li>
     <%= link_to "React Router", react_router_path %>
   </li>

spec/dummy/client/app/components/RouterLayout.jsx

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Link } from 'react-router';
+import { Link, Route, Switch } from 'react-router-dom';
+import RouterFirstPage from './RouterFirstPage';
+import RouterSecondPage from './RouterSecondPage';
 
 const RouterLayout = ({ children }) => (
   <div className="container">
@@ -10,23 +12,26 @@ const RouterLayout = ({ children }) => (
     </p>
     <ul>
       <li>
-        <Link to="/react_router" href="/react_router">
+        <Link to="/react_router">
           React Router Layout Only
         </Link>
       </li>
       <li>
-        <Link to="/react_router/first_page" href="/react_router/first_page">
+        <Link to="/react_router/first_page">
           Router First Page
         </Link>
       </li>
       <li>
-        <Link to="/react_router/second_page" href="/react_router/second_page">
+        <Link to="/react_router/second_page">
           Router Second Page
         </Link>
       </li>
     </ul>
     <hr />
-    {children}
+    <Switch>
+      <Route path="/react_router/first_page" component={RouterFirstPage} />
+      <Route path="/react_router/second_page" component={RouterSecondPage} />
+    </Switch>
   </div>
 );
 

spec/dummy/client/app/packs/client-bundle.js

@@ -24,7 +24,6 @@ import PureComponent from '../components/PureComponent';
 import CacheDisabled from '../components/CacheDisabled';
 import CssModulesImagesFontsExample from '../components/CssModulesImagesFontsExample';
 import ManualRenderApp from '../startup/ManualRenderAppRenderer';
-import DeferredRenderApp from '../startup/DeferredRenderAppClient';
 
 import SharedReduxStore from '../stores/SharedReduxStore';
 
@@ -55,7 +54,6 @@ ReactOnRails.register({
   PureComponent,
   CssModulesImagesFontsExample,
   ManualRenderApp,
-  DeferredRenderApp,
   CacheDisabled,
   RenderedHtml,
   ReactHelmetApp,

spec/dummy/client/app/packs/server-bundle.js

@@ -32,7 +32,6 @@ import CssModulesImagesFontsExample from '../components/CssModulesImagesFontsExa
 import SharedReduxStore from '../stores/SharedReduxStore';
 
 // Deferred render on the client side w/ server render
-import DeferredRenderApp from '../startup/DeferredRenderAppServer';
 import ManualRenderApp from '../startup/ManualRenderAppRenderer';
 
 import RenderedHtml from '../startup/ServerRenderedHtml';
@@ -66,7 +65,6 @@ ReactOnRails.register({
   HelloString,
   PureComponent,
   CssModulesImagesFontsExample,
-  DeferredRenderApp,
   RenderedHtml,
   ReactHelmetApp,
   ReactHelmetAppBroken,

spec/dummy/client/app/routes/routes.jsx

@@ -1,13 +1,8 @@
 import React from 'react';
-import { Route } from 'react-router';
+import { Route } from 'react-router-dom';
 
 import RouterLayout from '../components/RouterLayout';
-import RouterFirstPage from '../components/RouterFirstPage';
-import RouterSecondPage from '../components/RouterSecondPage';
 
 export default (
-  <Route path="react_router" component={RouterLayout}>
-    <Route path="first_page" component={RouterFirstPage} />
-    <Route path="second_page" component={RouterSecondPage} />
-  </Route>
+  <Route path="/react_router" component={RouterLayout} />
 );

spec/dummy/client/app/startup/ClientRouterApp.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Router, browserHistory } from 'react-router';
+import { BrowserRouter } from 'react-router-dom';
 import routes from '../routes/routes';
 
 export default (props) => (
-  <Router history={browserHistory} {...props}>
+  <BrowserRouter {...props}>
     {routes}
-  </Router>
+  </BrowserRouter>
 );

spec/dummy/client/app/startup/ServerRouterApp.jsx

@@ -1,29 +1,12 @@
 import React from 'react';
-import { match, RouterContext } from 'react-router';
+import { StaticRouter } from 'react-router-dom';
 
 import routes from '../routes/routes';
 
-export default (_props, railsContext) => {
-  let error;
-  let redirectLocation;
-  let routeProps;
-
-  const { location } = railsContext;
-
-  // See https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
-  match({ routes, location }, (_error, _redirectLocation, _routeProps) => {
-    error = _error;
-    redirectLocation = _redirectLocation;
-    routeProps = _routeProps;
-  });
-
-  // This tell react_on_rails to skip server rendering any HTML. Note, client rendering
-  // will handle the redirect. What's key is that we don't try to render.
-  // Critical to return the Object properties to match this { error, redirectLocation }
-  if (error || redirectLocation) {
-    return { error, redirectLocation };
-  }
-
-  // Important that you don't do this if you are redirecting or have an error.
-  return () => <RouterContext {...routeProps} />;
+export default (props, railsContext) => {
+  return () => (
+    <StaticRouter location={railsContext.location} {...props}>
+      {routes}
+    </StaticRouter>
+  );
 };

spec/dummy/package.json

@@ -30,7 +30,7 @@
     "react-on-rails": "file:.yalc/react-on-rails",
     "react-proptypes": "^1.0.0",
     "react-redux": "^7.2.2",
-    "react-router": "^3.2.1",
+    "react-router-dom": "^5.2.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.2.0",
     "resolve-url-loader": "^3.1.1",

spec/dummy/spec/system/integration_spec.rb

@@ -177,32 +177,6 @@ def finished_all_ajax_requests?
   end
 end
 
-describe "Code Splitting", :js, type: :system do
-  before { visit "/deferred_render_with_server_rendering" }
-
-  it "clicking on async route causes async component to be fetched" do
-    header_text = page.find(:css, "h1").text
-
-    expect(header_text).to eq("Deferred Rendering")
-    expect(page).not_to have_text "Noice!"
-
-    click_link "Test Async Route"
-    expect(page).to have_current_path("/deferred_render_with_server_rendering/async_page")
-    expect(page).to have_text "Noice!"
-  end
-end
-
-describe "Example of Code Splitting with Rendering of Async Routes", :js, type: :system do
-  subject { page }
-
-  before { visit "/deferred_render_with_server_rendering/async_page" }
-
-  context "when deferring the initial render should prevent a client/server checksum mismatch error" do
-    # Wait for client rendering to finish
-    it { is_expected.to have_text("Mounted: true") }
-  end
-end
-
 describe "renderedHtml from Render-Function", :js, type: :system do
   before { visit "/rendered_html" }