Redirect on props update (#5003)

packages/react-router/modules/Redirect.js

@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import warning from 'warning'
 import invariant from 'invariant'
+import { createLocation, locationsAreEqual } from 'history'
 
 /**
- * The public API for updating the location programatically
+ * The public API for updating the location programmatically
  * with a component.
  */
 class Redirect extends React.Component {
@@ -13,7 +15,7 @@ class Redirect extends React.Component {
     to: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.object
-    ])
+    ]).isRequired
   }
 
   static defaultProps = {
@@ -49,6 +51,19 @@ class Redirect extends React.Component {
       this.perform()
   }
 
+  componentDidUpdate(prevProps) {
+    const prevTo = createLocation(prevProps.to)
+    const nextTo = createLocation(this.props.to)
+
+    if (locationsAreEqual(prevTo, nextTo)) {
+      warning(false, `You tried to redirect to the same route you're currently on: ` +
+        `"${nextTo.pathname}${nextTo.search}"`)
+      return
+    }
+
+    this.perform()
+  }
+
   perform() {
     const { history } = this.context.router
     const { push, to } = this.props

packages/react-router/modules/__tests__/Switch-test.js

@@ -102,6 +102,145 @@ describe('A <Switch>', () => {
     expect(node.innerHTML).toContain('bub')
   })
 
+  it('handles subsequent redirects', () => {
+    const node = document.createElement('div')
+
+    ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/one' ]}>
+        <Switch>
+          <Redirect exact from="/one" to="/two"/>
+          <Redirect exact from="/two" to="/three"/>
+
+          <Route path="/three" render={() => <div>three</div>}/>
+        </Switch>
+      </MemoryRouter>
+    ), node)
+
+    expect(node.innerHTML).toContain('three')
+  })
+
+  it('warns when redirecting to same route, both strings', () => {
+    const node = document.createElement('div')
+    let redirected = false
+    let done = false
+
+    spyOn(console, 'error')
+
+    ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/one' ]}>
+        <Switch>
+          <Route path="/one" render={() => {
+            if (done)
+              return <h1>done</h1>
+
+            if (!redirected) {
+              return <Redirect to="/one"/>
+            }
+            done = true
+
+            return <Redirect to='/one'/>
+          }}/>
+        </Switch>
+      </MemoryRouter>
+    ), node)
+
+    expect(node.innerHTML).not.toContain('done')
+    expect(console.error.calls.count()).toBe(1)
+    expect(console.error.calls.argsFor(0)[0]).toMatch(/Warning:.*"\/one"/)
+  })
+
+  it('warns when redirecting to same route, mixed types', () => {
+    const node = document.createElement('div')
+    let redirected = false
+    let done = false
+
+    spyOn(console, 'error')
+
+    ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/one' ]}>
+        <Switch>
+          <Route path="/one" render={() => {
+            if (done)
+              return <h1>done</h1>
+
+            if (!redirected) {
+              redirected = true
+              return <Redirect to="/one"/>
+            }
+            done = true
+
+            return <Redirect to={{ pathname: '/one' }}/>
+          }}/>
+        </Switch>
+      </MemoryRouter>
+    ), node)
+
+    expect(node.innerHTML).not.toContain('done')
+    expect(console.error.calls.count()).toBe(1)
+    expect(console.error.calls.argsFor(0)[0]).toMatch(/Warning:.*"\/one"/)
+  })
+
+  it('warns when redirecting to same route, mixed types, string with query', () => {
+    const node = document.createElement('div')
+    let redirected = false
+    let done = false
+
+    spyOn(console, 'error')
+
+    ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/one' ]}>
+        <Switch>
+          <Route path="/one" render={() => {
+            if (done)
+              return <h1>done</h1>
+
+            if (!redirected) {
+              redirected = true
+              return <Redirect to="/one?utm=1"/>
+            }
+            done = true
+
+            return <Redirect to={{ pathname: '/one', search: '?utm=1' }}/>
+          }}/>
+        </Switch>
+      </MemoryRouter>
+    ), node)
+
+    expect(node.innerHTML).not.toContain('done')
+    expect(console.error.calls.count()).toBe(1)
+    expect(console.error.calls.argsFor(0)[0]).toMatch(/Warning:.*"\/one\?utm=1"/)
+  })
+
+  it('does NOT warn when redirecting to same route with different `search`', () => {
+    const node = document.createElement('div')
+    let redirected = false
+    let done = false
+
+    spyOn(console, 'error')
+
+    ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/one' ]}>
+        <Switch>
+          <Route path="/one" render={() => {
+            if (done)
+              return <h1>done</h1>
+
+            if (!redirected) {
+              redirected = true
+              return <Redirect to={{ pathname: '/one', search: '?utm=1' }}/>
+            }
+            done = true
+
+            return <Redirect to={{ pathname: '/one', search: '?utm=2' }}/>
+          }}/>
+        </Switch>
+      </MemoryRouter>
+    ), node)
+
+    expect(node.innerHTML).toContain('done')
+    expect(console.error.calls.count()).toBe(0)
+  })
+
   it('handles comments', () => {
     const node = document.createElement('div')