Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #5114 warn about history prop in Router-derived components #5151

Merged
merged 7 commits into from
Jun 21, 2017

Conversation

Aprillion
Copy link
Contributor

Adding a warning as suggested in issue #5114.

'`<BrowserRouter history={...}` prop has been ignored. For custom history, ' +
'make sure to `import {Router}` and not `import {... as Router}`.')
}

Copy link
Contributor

@pshrmn pshrmn May 23, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should just use the warning package. You'll need to install it for react-router-dom, but it is already installed for react-router. Basically, just change this block to:

warning(
  !this.props.history,
  ...
);

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a minor nit, but I would prefer if there were spaces inside of the curly brackets. import { Router } and import { ... as Router }.

@Aprillion
Copy link
Contributor Author

Aprillion commented May 27, 2017

when I tried just https://github.com//pull/5151/commits/99d971676e7131e7832ffa727c611b161fde906b, the test failed because `console.error` was called 0 times + because there was some spill-over of 2 additional console-errors for unrelated test in `HashRouter`:
lerna ERR! execute   A <BrowserRouter>
lerna ERR! execute     × warns when passed a history prop
lerna ERR! execute       Chrome 58.0.3029 (Windows 10 0.0.0)
lerna ERR! execute     Error: Expected 0 to be 1
...
lerna ERR! execute   A <HashRouter>
lerna ERR! execute     × warns when passed a history prop
lerna ERR! execute       Chrome 58.0.3029 (Windows 10 0.0.0)
lerna ERR! execute     Error: Expected 3 to be 1

the additional 2 HashRouter warnings are following:

lerna ERR! execute   A <HashRouter>
lerna ERR! execute     × warns when passed a history prop
lerna ERR! execute       Chrome 58.0.3029 (Windows 10 0.0.0)
lerna ERR! execute     Error: Expected 'Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component\'s constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.' to match /<HashRouter.*import \{Router}/

@pshrmn I have better things to do that trying to debug how to test this :(

I would be happy to add spaces in imports if you think this can be merged without warning module and/or someone can figure out the tests :)

@Aprillion
Copy link
Contributor Author

I used wrong syntax in previous change, please disregard. warning(this.props.history, ...) instead of warning(!this.props.history, ...)

@Aprillion Aprillion force-pushed the 5114-history-warning branch from 99d9716 to 50667ad Compare May 27, 2017 11:47
@pshrmn
Copy link
Contributor

pshrmn commented May 27, 2017

The code looks good to me now, thanks!

warning (and invariant) are always weird to use because they work when the value is falsy instead of truthy.

warning(
!this.props.history,
'`<BrowserRouter history={...}` prop has been ignored. For custom history, ' +
'make sure to `import { Router }` and not `import { ... as Router }`.'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can fill in the ellipsis in these warnings with the actual Component name.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought of it as a general warning to avoid using any of the Browser/Hash/Memory/Static Router with history, do you think the ellipsis makes the message unclear?

@timdorr
Copy link
Member

timdorr commented Jun 21, 2017

OK, cleaned up the messaging a bit. Thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants