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
React.lazy makes Route's proptypes fail #6420
Comments
Same thing with |
Did you also upgrade edit: Never mind, I see the |
Wait for a release :) |
@rnnyrk I just did the following for now 🤷♂️ const Home = React.lazy(() => import('./Home')
<Route exact path="/" component={props => <Home {...props} />} /> |
@tylerwray The trick doesn't seem to work with Typescript since Lazy doesn't have proper typing and jsx elements must be explicitly defined as a jsx component. |
This was fixed in beta.5. |
It's still an issue if If you want, I can create a PR to bump the dependency requirement, perhaps? Here's a reproduction, forked from the original codesandbox in this issue: https://codesandbox.io/s/q3y66owkj6 |
#6447 :) |
Ah, sorry! |
This trick does fix the error, but can have some side effect since it makes Home component re-render at every parent render. ( eg: if Home have componentDidMount ) |
@pierreferry if you go that path, the |
@pshrmn hey,when will you publish 4.4.0 version,this is a common problem。 |
Any updates? It would be a great gift for the new year for me :) |
Same here, any updates? |
Same. The render prop work around resolves the warning. Not sure why this issue is closed though. It needs a fix. |
I resolve this warning by using render |
@willnew , as @pierreferry mentioned: |
@vtereshyn I believe this is different :
I haven't tested render method yet :)
|
@vtereshyn I made a small Demo, you can test with it with |
@willnew , oh, sorry, misunderstood. |
@vtereshyn it's OK, I made a mistake that I didn't explain in detail in my first comment. |
another option is to extend proptype definition for // react-router-dom-fix.js
import PropTypes from 'prop-types';
import { Route } from 'react-router-dom';
// suppress prop-types warning on Route component when using with React.lazy
// until react-router-dom@4.4.0 or higher version released
/* eslint-disable react/forbid-foreign-prop-types */
Route.propTypes.component = PropTypes.oneOfType([
Route.propTypes.component,
PropTypes.object,
]);
/* eslint-enable react/forbid-foreign-prop-types */ should not have any side effects... |
I have the same in js code, but it not happen in ts. |
This works for me. is it trustable @sunstorymvp ? |
@prakashtsi works as expected. waiting for new release which is compatible with React.lazy to get rid of this code |
I just fixed it with updating |
Hello,
The newly introduced React.lazy for easy code-splitting is making the
Route
component proptypes to fail with the warning :Version
react-router-dom: 4.4.0-beta.4
react: 16.6.0
Test Case
I took the official example from here : https://reactjs.org/docs/code-splitting.html#route-based-code-splitting
https://codesandbox.io/s/xp2nwl2qxw
The text was updated successfully, but these errors were encountered: