I'm trying to use the Link component in @fluentui/react, but I get an error about invalid hook calls. I tried using Link in office-ui-fabric-react, but got same hook error.
Background:
Component A calls the code with the Link component.
Component A is in a different folder than Link component.
Error: "react-dom.development.js:3198 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app"
Link code:
import * as React from "react";
import { Link } from "@fluentui/react";
//import { Link } from "office-ui-fabric-react";
export interface ITestProps {
what: string;
click: () => void;
}
export default class TestComponent extends React.PureComponent<ITestProps, {}> {
constructor(props: ITestProps) {
super(props);
}
render() {
return (
<div>
Test {this.props.what}
<button onClick={this.props.click}>Click</button>
<Link onClick={this.props.click}>Click link</Link> <-- this is what is causing hook problems
</div>
);
}
}
Then I tried using a functional component rather than extending from React.PureComponent, but same hook error:
export default function TestComponent(props: ITestProps) {
return (
<div>
Test2 {props.what}
<button onClick={props.click}>Click</button>
<Link onClick={props.click}>Click link</Link> <-- also produces hook error
</div>
);
}
The only way that I solved this problem is my Link code inside the same folder as the Component that uses the Link code.
I want to be able to put my Link code in a separate folder, not in the same folder as Component A.
I also made sure that the react and react-dom version of both folders are the same, but I still got hook errors.
Please any suggestions?