chore: upgrades react-router-dom, fixes dev-mode linking (#4115)

* fix: stale route

* fix: add e2e test

* fix: update e2e test

cypress/e2e/link.test.ts

+// see https://github.com/Uniswap/interface/pull/4115
+describe('Link', () => {
+  it('should update route', () => {
+    cy.visit('/')
+    cy.get('[data-cy="pool-nav-link"]').click()
+    cy.get('[data-cy="join-pool-button"]').should('exist')
+  })
+})

package.json

@@ -177,7 +177,7 @@
     "react-markdown": "^4.3.1",
     "react-popper": "^2.2.3",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^5.0.0",
+    "react-router-dom": "^5.3.3",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14",
     "react-virtualized-auto-sizer": "^1.0.2",

src/components/Header/index.tsx

@@ -98,7 +98,7 @@ const HeaderLinks = styled(Row)`
   overflow: auto;
   align-items: center;
   ${({ theme }) => theme.mediaWidth.upToLarge`
-    justify-self: start;  
+    justify-self: start;
     `};
   ${({ theme }) => theme.mediaWidth.upToMedium`
     justify-self: center;
@@ -281,6 +281,7 @@ export default function Header() {
           <Trans>Swap</Trans>
         </StyledNavLink>
         <StyledNavLink
+          data-cy="pool-nav-link"
           id={`pool-nav-link`}
           to={'/pool'}
           isActive={(match, { pathname }) =>

src/pages/Pool/PositionPage.tsx

@@ -588,7 +588,11 @@ export function PositionPage({
           />
           <AutoColumn gap="md">
             <AutoColumn gap="sm">
-              <Link style={{ textDecoration: 'none', width: 'fit-content', marginBottom: '0.5rem' }} to="/pool">
+              <Link
+                data-cy="visit-pool"
+                style={{ textDecoration: 'none', width: 'fit-content', marginBottom: '0.5rem' }}
+                to="/pool"
+              >
                 <HoverText>
                   <Trans>← Back to Pools Overview</Trans>
                 </HoverText>

src/pages/Pool/index.tsx

@@ -279,7 +279,7 @@ export default function Pool() {
                       )}
                     />
                   )}
-                  <ResponsiveButtonPrimary id="join-pool-button" as={Link} to="/add/ETH">
+                  <ResponsiveButtonPrimary data-cy="join-pool-button" id="join-pool-button" as={Link} to="/add/ETH">
                     + <Trans>New Position</Trans>
                   </ResponsiveButtonPrimary>
                 </ButtonRow>

yarn.lock

@@ -15129,25 +15129,25 @@ react-remove-scroll@^2.3.0:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
-react-router-dom@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz"
-  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+react-router-dom@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.3.tgz#8779fc28e6691d07afcaf98406d3812fe6f11199"
+  integrity sha512-Ov0tGPMBgqmbu5CDmN++tv2HQ9HlWDuWIIqn4b88gjlAN5IHI+4ZUZRcpz9Hl0azFIwihbLDYw1OiHGRo7ZIng==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.12.13"
     history "^4.9.0"
     loose-envify "^1.3.1"
     prop-types "^15.6.2"
-    react-router "5.2.0"
+    react-router "5.3.3"
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz"
-  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+react-router@5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.3.tgz#8e3841f4089e728cf82a429d92cdcaa5e4a3a288"
+  integrity sha512-mzQGUvS3bM84TnbtMYR8ZjKnuPJ71IjSzR+DE6UkUqvN4czWIqEs17yLL8xkAycv4ev0AiN+IGrWu88vJs/p2w==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.12.13"
     history "^4.9.0"
     hoist-non-react-statics "^3.1.0"
     loose-envify "^1.3.1"