Issue remix-run#5114 warn about history prop in Router-derived components (remix-run#5151)

* Issue remix-run#5114 warn about history prop in Router-derived components

* Use warning module

* Clean up BrowserRouter warning

* Clean up HashRouter warning

* Clean up MemoryRouter warning

* Clean up StaticRouter warning

Author: Aprillion

packages/react-router-dom/modules/BrowserRouter.js

@@ -1,3 +1,4 @@
+import warning from 'warning'
 import React from 'react'
 import PropTypes from 'prop-types'
 import createHistory from 'history/createBrowserHistory'
@@ -18,6 +19,12 @@ class BrowserRouter extends React.Component {
   history = createHistory(this.props)
 
   render() {
+    warning(
+      !this.props.history,
+      '<BrowserRouter> ignores the history prop. To use a custom history, ' +
+      'make sure you are using `import { Router }` and not `import { BrowserRouter as Router }`.'
+    )
+
     return <Router history={this.history} children={this.props.children}/>
   }
 }

packages/react-router-dom/modules/HashRouter.js

@@ -1,3 +1,4 @@
+import warning from 'warning'
 import React from 'react'
 import PropTypes from 'prop-types'
 import createHistory from 'history/createHashHistory'
@@ -17,6 +18,12 @@ class HashRouter extends React.Component {
   history = createHistory(this.props)
 
   render() {
+    warning(
+      !this.props.history,
+      '<HashRouter> ignores the history prop. To use a custom history, ' +
+      'make sure you are using `import { Router }` and not `import { HashRouter as Router }`.'
+    )
+
     return <Router history={this.history} children={this.props.children}/>
   }
 }

packages/react-router-dom/modules/__tests__/BrowserRouter-test.js

@@ -26,4 +26,19 @@ describe('A <BrowserRouter>', () => {
 
     expect(history).toBeAn('object')
   })
+
+  it('warns when passed a history prop', () => {
+    const history = {}
+    const node = document.createElement('div')
+    expect.spyOn(console, 'error')
+
+    ReactDOM.render((
+      <BrowserRouter history={history} />
+    ), node)
+
+    expect(console.error.calls.length).toBe(1)
+    expect(console.error.calls[0].arguments[0]).toMatch(
+      /<BrowserRouter.*import \{ Router }/)
+    expect.restoreSpies()
+  })
 })

packages/react-router-dom/modules/__tests__/HashRouter-test.js

@@ -26,4 +26,19 @@ describe('A <HashRouter>', () => {
 
     expect(history).toBeAn('object')
   })
+
+  it('warns when passed a history prop', () => {
+    const history = {}
+    const node = document.createElement('div')
+    expect.spyOn(console, 'error')
+
+    ReactDOM.render((
+      <HashRouter history={history} />
+    ), node)
+
+    expect(console.error.calls.length).toBe(1)
+    expect(console.error.calls[0].arguments[0]).toMatch(
+      /<HashRouter.*import \{ Router }/)
+    expect.restoreSpies()
+  })
 })

packages/react-router/modules/MemoryRouter.js

@@ -1,3 +1,4 @@
+import warning from 'warning'
 import React from 'react'
 import PropTypes from 'prop-types'
 import createHistory from 'history/createMemoryHistory'
@@ -18,6 +19,12 @@ class MemoryRouter extends React.Component {
   history = createHistory(this.props)
 
   render() {
+    warning(
+      !this.props.history,
+      '<MemoryRouter> ignores the history prop. To use a custom history, ' +
+      'make sure you are using `import { Router }` and not `import { MemoryRouter as Router }`.'
+    )
+
     return <Router history={this.history} children={this.props.children}/>
   }
 }

packages/react-router/modules/StaticRouter.js

@@ -1,3 +1,4 @@
+import warning from 'warning'
 import invariant from 'invariant'
 import React from 'react'
 import PropTypes from 'prop-types'
@@ -127,6 +128,12 @@ class StaticRouter extends React.Component {
       block: this.handleBlock
     }
 
+    warning(
+      !this.props.history,
+      '<StaticRouter> ignores the history prop. To use a custom history, ' +
+      'make sure you are using `import { Router }` and not `import { StaticRouter as Router }`.'
+    )
+
     return <Router {...props} history={history}/>
   }
 }

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

@@ -26,4 +26,19 @@ describe('A <MemoryRouter>', () => {
 
     expect(history).toBeAn('object')
   })
+
+  it('warns when passed a history prop', () => {
+    const history = {}
+    const node = document.createElement('div')
+    expect.spyOn(console, 'error')
+
+    ReactDOM.render((
+      <MemoryRouter history={history} />
+    ), node)
+
+    expect(console.error.calls.length).toBe(1)
+    expect(console.error.calls[0].arguments[0]).toMatch(
+      /<MemoryRouter.*import \{ Router }/)
+    expect.restoreSpies()
+  })
 })

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

@@ -68,6 +68,22 @@ describe('A <StaticRouter>', () => {
     )
   })
 
+  it('warns when passed a history prop', () => {
+    const context = {}
+    const history = {}
+    const node = document.createElement('div')
+    expect.spyOn(console, 'error')
+
+    ReactDOM.render((
+      <StaticRouter context={context} history={history} />
+    ), node)
+
+    expect(console.error.calls.length).toBe(1)
+    expect(console.error.calls[0].arguments[0]).toMatch(
+      /<StaticRouter.*import \{ Router }/)
+    expect.restoreSpies()
+  })
+
   it('reports PUSH actions on the context object', () => {
     const context = {}
 
@@ -211,4 +227,5 @@ describe('A <StaticRouter>', () => {
       }).toNotThrow()
     })
   })
+
 })