Explicit error on <Route> outside <Router> (remix-run#4939)

* Explicit error on <Route> outside <Router>

When using <Route> outside a valid <Router>, the message is not that explicit. It throws:

`Cannot read property 'route' of undefined`

Even though it's not that bad, I propose we make it even more explicit. Can't be bad to know where the error is coming from. If you made a typo when importing the router, it's not obvious otherwise.

This will throw an error rather than a warning because the library code would crash otherwise.

* Add unit test

* Fix unit test change

* Add router check before first usage on <Router />

* Switch throw to invariant for <Router> check

* Add <Router> check on <Link>, <Switch>, <Redirect>, <Prompt>

Author: benoit-tremblay

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import invariant from 'invariant'
 
 const isModifiedEvent = (event) =>
   !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
@@ -58,6 +59,11 @@ class Link extends React.Component {
   render() {
     const { replace, to, innerRef, ...props } = this.props // eslint-disable-line no-unused-vars
 
+    invariant(
+      this.context.router,
+      'You should not use <Link> outside a valid <Router>'
+    )
+
     const href = this.context.router.history.createHref(
       typeof to === 'string' ? { pathname: to } : to
     )

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

@@ -25,6 +25,15 @@ describe('A <Link>', () => {
     expect(href).toEqual('/the/path?the=query#the-hash')
   })
 
+  it('crashes explicitly with no valid <Router>', () => {
+    const node = document.createElement('div')
+
+    expect(() => {
+      ReactDOM.render((
+        <Link to="/">link</Link>
+      ), node)
+    }).toThrow(/You should not use <Link> outside a valid <Router>/)
+
   it('exposes its ref via an innerRef prop', done => {
     const node = document.createElement('div')
 

packages/react-router-dom/package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "history": "^4.5.1",
+    "invariant": "^2.2.2",
     "loose-envify": "^1.3.1",
     "prop-types": "^15.5.4",
     "react-router": "^4.1.1"

packages/react-router/modules/Prompt.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import invariant from 'invariant'
 
 /**
  * The public API for prompting the user before navigating away
@@ -41,6 +42,11 @@ class Prompt extends React.Component {
   }
 
   componentWillMount() {
+    invariant(
+      this.context.router,
+      'You should not use <Prompt> outside a valid <Router>'
+    )
+
     if (this.props.when)
       this.enable(this.props.message)
   }

packages/react-router/modules/Redirect.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import invariant from 'invariant'
 
 /**
  * The public API for updating the location programatically
@@ -34,6 +35,11 @@ class Redirect extends React.Component {
   }
 
   componentWillMount() {
+    invariant(
+      this.context.router,
+      'You should not use <Redirect> outside a valid <Router>'
+    )
+
     if (this.isStatic())
       this.perform()
   }

packages/react-router/modules/Route.js

@@ -1,4 +1,5 @@
 import warning from 'warning'
+import invariant from 'invariant';
 import React from 'react'
 import PropTypes from 'prop-types'
 import matchPath from './matchPath'
@@ -49,10 +50,16 @@ class Route extends React.Component {
     match: this.computeMatch(this.props, this.context.router)
   }
 
-  computeMatch({ computedMatch, location, path, strict, exact }, { route }) {
+  computeMatch({ computedMatch, location, path, strict, exact }, router) {
     if (computedMatch)
       return computedMatch // <Switch> already computed the match for us
 
+    invariant(
+      router,
+      'You should not use <Route> or withRouter() outside a valid <Router>'
+    )
+
+    const { route } = router
     const pathname = (location || route.location).pathname
 
     return path ? matchPath(pathname, { path, strict, exact }) : route.match
@@ -63,17 +70,17 @@ class Route extends React.Component {
 
     warning(
       !(component && render),
-      'You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored'   
+      'You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored'
     )
 
     warning(
       !(component && children),
-      'You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored'   
+      'You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored'
     )
 
     warning(
       !(render && children),
-      'You should not use <Route render> and <Route children> in the same route; <Route children> will be ignored'    
+      'You should not use <Route render> and <Route children> in the same route; <Route children> will be ignored'
     )
   }
 

packages/react-router/modules/Switch.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import warning from 'warning'
+import invariant from 'invariant'
 import matchPath from './matchPath'
 
 /**
@@ -18,6 +19,13 @@ class Switch extends React.Component {
     location: PropTypes.object
   }
 
+  componentWillMount() {
+    invariant(
+      this.context.router,
+      'You should not use <Switch> outside a valid <Router>'
+    )
+  }
+
   componentWillReceiveProps(nextProps) {
     warning(
       !(nextProps.location && !this.props.location),

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

@@ -88,6 +88,16 @@ describe('A <Route>', () => {
     push('/sushi/spicy-tuna')
     expect(node.innerHTML).toContain('/sushi/spicy-tuna')
   })
+
+  it('crash explicitly with no valid <Router>', () => {
+    const node = document.createElement('div')
+
+    expect(() => {
+      ReactDOM.render((
+        <Route path="/" render={() => null} />
+      ), node)
+    }).toThrow(/You should not use <Route> or withRouter\(\) outside a valid <Router>/)
+  })
 })
 
 describe('A <Route> with dynamic segments in the path', () => {
@@ -342,7 +352,7 @@ describe('A <Route location>', () => {
 
       expect(node.innerHTML).toContain(TEXT)
     })
-    
+
     it('continues to use parent\'s prop location after navigation', () => {
       const TEXT = 'cheddar pretzel'
       const node = document.createElement('div')

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

@@ -135,6 +135,23 @@ describe('A <Switch>', () => {
 
     expect(node.innerHTML).toMatch(/one/)
   })
+
+  it('crash explicitly with no valid <Router>', () => {
+    const node = document.createElement('div')
+
+    expect(() => {
+      ReactDOM.render((
+        <Switch>
+          <Route path="/one" render={() => (
+            <h1>one</h1>
+          )}/>
+          <Route path="/two" render={() => (
+            <h1>two</h1>
+          )}/>
+        </Switch>
+      ), node)
+    }).toThrow(/You should not use <Switch> outside a valid <Router>/)
+  })
 })