in the use of library 'react-metismenu' there is not problem and work correctly,but this use anchor for selecting item of menu. that is not good.
so to use react-router-link i use 'react-metismenu-router-link' library
but this error accured:(
Cannot read property 'history' of undefined
this.context.router.history.listen(this.onLocationChange.bind(this));
how to fix this problem?
https://www.npmjs.com/package/react-metismenu-router-link
There's an open PR to fix this bug but the original repository has been archived so it won't be merged.
You can checkout jhillhouse92's fork of react-metismenu-router-link and install this package instead of the original one, it includes the code of the PR.
Edit: I'm adding more information as suggested.
This bug is caused by the use of Context API instead of props in RouterLink component, as you can see in the PR.
These are the bug causing lines in RouterLink.jsx :
this.context.router.history.listen(this.onLocationChange.bind(this));
this.onLocationChange(this.context.router.route);
jhillhouse92 commits are replacing context with props:
class RouterLink extends React.Component {
componentWillMount() {
this.to = this.props.to;
if (this.to[0] !== '/') this.to = `/${this.to}`;
// He is using props.history instead of context.router.history
// and props.location instead of context.router.route
this.props.history.listen(this.onLocationChange.bind(this));
this.onLocationChange(this.props.location);
}
onLocationChange(e) {
if ((e.pathname || '/') === this.to) {
this.props.activateMe();
}
}
We are also adding withRouter in the export of our RouterLink component to give him react-router-dom related props (e.g. props.history):
export default withRouter(RouterLink);
Applying these changes, either by installing the package from git or editing manually should solve your bug.
Related
There is a package called react-data-grid. And there is an example table on that particular package but the code is in TypeScript and also docs for this particular version are not there. I tried to convert the typescript to React. Everything was fine until I wanted to implement Drag and Drop. Some error is coming and I think that error is because I'm importing something in the wrong way. Can you tell me where I'm doing anything wrong?
Here is the Sandbox link.
The error in my local build is coming on RowRender.js in line number 44.
I also included the typescript file there.
You can also see the error if you just uncomment the line 72-74 of App.js component in sandbox.
Rename .ts file to .tsx file. In another case TypeScript will not understand <div> <Row> and other react elements
Update your imports regarding react-data-grid to: import { Row, RowRendererProps } from "react-data-grid";
Update your import import { useCombinedRefs } from ... to fetch hook from correct place.
If you will see error regarding default import for React - change import React from 'react' to import * as React from "react"; or update tsconfig to support synthetic imports
useCombinedRefs - is internal function that is not exported, so you can't use it directly. Option #1 - write it yourself. Option #2 find the reason why you are trying to use internal function. Should be the better way.
function useCombinedRefs(...refs) {
return useCallback(handle => {
for (const ref of refs) {
if (typeof ref === 'function') {
ref(handle);
} else if (ref !== null) {
ref.current = handle;
}
}
}, refs);
}
The current problem I have is that i want to use navigation parameters to update the state
The tutorial in the link above uses React Navigation 4.x while I use React Navigation 5.x
Tutorial:
function onSaveNote() {
navigation.state.params.addNote({ noteTitle, noteValue })
navigation.goBack()
}
MyProject:
function onSaveAuction() {
navigation.navigate('Home', { auctionTitle, auctionValue }
}
This is the warning I would get whenever I used used the code for 4.x
I have tried using the second bullet point which is to use navigate instead but it still does not seem to work.
Any help would be appreciated.
There is nothing wrong with the syntax(except for the bracket you forgot to close). Your problem is with the data you are trying to pass. The warning tells you that you are trying to pass non-serializable values such as class instances, functions etc. So check again what are the values of auctionTitle and auctionValue.
We don't know your data, however you shouldn't pass functions or class in nav params.
To make sure that your data doesn't have non-serializable data, as mentioned above, you can try do a JSON.stringify(), then JSON.parse in next screen to see if this warning disappears.
The best solution is to check your data, but if you need to pass non-serializable data, feel free to use JSON.
I made a example to you:
Passing params:
function onSaveAuction() {
/* It will remove any functions, class or other non-serializable from params. */
const data = JSON.stringify({ auctionTitle, auctionValue });
navigation.navigate('Home', { data });
}
Home.js
function Home({ route, navigation }) {
/* Get the param, then parse to object */
const data = JSON.parse(route.params.data);
}
I'm using elements with custom tag names in React and getting a wall of these errors. There's a GitHub issue on the subject (https://github.com/hyperfuse/react-anime/issues/33) in which someone states:
This is a new warning message in React 16. Has nothing to do with anime/react-anime and this warning can safely be ignored.
It's nice that it can be safely ignored, but it's still not going to pass scrutiny when my code is filling the console with useless error messages.
How can I suppress these warnings?
I found a potential fix for this issue - if you are using a plugin (and potentially in other circumstances) you can use the is attribute.
Found here when working with X3d - simply writing <scene is="x3d" .../> works
Update:
see the answer from #triple with the correct solution:
https://stackoverflow.com/a/55537927/1483006
Orignal:
I'm not saying this a correct thing you should really do, but you could hook console.error and filter this message by putting this somewhere before react-anime is loaded:
const realError = console.error;
console.error = (...x) => {
// debugger;
if (x[0] === 'Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.') {
return;
}
realError(...x);
};
It seemed to work on the sample that was posted in the GitHub issue you linked at least. :3
My solution was to create envelope component which renders <div> with desired classes:
import React, {Component, DetailedHTMLFactory, HTMLAttributes} from "react";
import classNames from "classnames";
export default class SimpleTagComponent extends Component<SimplePropTypes>{
baseClassName = 'simpleComponent'
render() {
return React.createElement(
'div',
{
...this.props,
className: classNames(this.baseClassName, this.props.className),
},
this.props.children
);
}
}
type SimplePropTypes = HTMLAttributes<HTMLDivElement>
export class MyTag extends SimpleTagComponent {
baseClassName = 'my'
}
I don't believe there's a built in way to suppress the error message.
The warning message is logged right here in react-dom. You could fork react-dom and simply remove the error message. For a change as small as this, perhaps using something like patch-package would be useful, so you don't have to maintain a fork.
React 16 gives warnings with x3dom components .
including is="x3d" in component suppresses these warnings.
I had the same error. My problem was the new file for js when I use sfc I first letter of the name (tagname) has to be capital letter. I am just new so, I didn't notice it. But I am writing this just in case
I wrapped my HTML in the <svg> tag.
https://github.com/facebook/react/issues/16135:
I think you're probably rendering them outside of <svg> tags.
This is what got rid of the Web Browser Warnings for me:
BAD:
const SocialMedia = (props) => {
<socialmedia>
return (
Good:
const SocialMedia = (props) => {
return (
I'm not able to put a react-router-dom Link inside of a react-google-maps InfoBox without causing a full page reload.
Here's the code for my InfoBox:
import InfoBox from 'react-google-maps/lib/components/addons/InfoBox'
import { Link } from "react-router-dom";
class MyInfoBox extends Component {
...
const options = {
enableEventPropagation:false,
position: new google.maps.LatLng(loc.latitude, loc.longitude)
};
render(){
return (
<InfoBox options={options}>
<Link to={`/location/${loc.id}`}>Go To Location</Link>
</InfoBox>
);
}
}
All Links in my app work correctly, except for this one.
When the "Go To Location" link is clicked, a full-page reload is caused. I've tried to diagnose by following this issue: https://github.com/tomchentw/react-google-maps/issues/258, but I really don't know enough about the react router v4 to find out if the context contains the router object. Changing the value of enableEventPropagation does not change the behavior.
If anyone can help me understand why the Link is causing a page reload, I would really appreciate it.
Thank you in advance!
Try removing onClick prop in <GoogleMap> component and add enableEventPropagation: true to <InfoBox> options.
For me the issue was that <GoogleMap> onClick event was used to remove <InfoBox> when user clicks outside it. But turns out it is called also inside <InfoBox> so basically it was removing <InfoBox> with the <Link> inside it, before handling <Link> click.
In a project, my intention is to use only one Navigator element to handle all page navigation.
There is one singleton appState all over the code, and navigator is member of that, it gets initialized by the outermost App component.
ReactDOM.render(
<App/>,
document.getElementById('app')
);
The navigator is initiated by:
initialRoute = {
component: LoginPage,
props: {
}};
and
<Ons.Navigator
initialRoute={this.initialRoute}
renderPage={this.renderPage.bind(this)}
/>
and
renderPage(route: Route, navigator: typeof Ons.Navigator) {
const props: any = route.props || {};
if (appState.navigator == null) {
appState.navigator = navigator;
}
props.navigator = appState.navigator;
return React.createElement(route.component, route.props);
}
correctly with initialRoute. When I call pushPage(newRoute), the newRoute is apparently added, when checked at the time of addition. That is, I get the following right after pushing newRoute:
LoginPage
HomePage
However, a subsequent call to pushPage(someOtherRoute) yields
LoginPage
SomeOtherRouteComponent
I would expect
LoginPage
HomePage
SomeOtherRouteComponent
I have verified that there is no issue with synchronization etc, when I push the route object to an aside list, I get everything without any loss. But just pushPage is not working as I expect.
Any ideas, or missing something obvious? The snippets are TS.
It appears that any error during page load is caught by Navigator, and that causes the page to be not added into routes (but the page is still navigated to).
I have filed an issue on github with a workaround. An alternative workaround is to make sure that there are no JS errors during page load, which may not be 100% the case given 3rd party modules are present.