Difference between Rendering by import and normal in react js

Question

I have developed my own website and have errors using react hook. The errors are like below.

Uncaught 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:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

And here is my code.

ProfileEditing.js

import React from 'react';
import { useSelector } from 'react-redux';

const ProfileEditing = ({
}) => {

    const user = useSelector(state => state.auth);
    console.log(user);

    return (
        <section className="dashboard">
            <div className='side'>
                <h1 className="large text-primary">Dashboard</h1>
                <p className="lead">
            </div>
        </section>
    );
};

export default ProfileEditing;

App.js

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Provider, useSelector } from 'react-redux';
import ProfileEditing from './ProfileEditing'

const App = () => {
  return (
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path="profileEditing" element={<ProfileEditing />} />
        </Routes>
      </Router>
      <Link to="/profileEditing"> GO </Link>
    </Provider>
  );
};

export default App;

I try to fix it but doesn't work at all.

But If I move ProfileEditing function to App.js, then it works perfectly.

App.js

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Provider, useSelector } from 'react-redux';
// import ProfileEditing from './ProfileEditing'

const App = () => {
  return (
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path="profileEditing" element={<ProfileEditing />} />
        </Routes>
      </Router>
      <Link to="/profileEditing"> GO </Link>
    </Provider>
  );
};

export default App;

const ProfileEditing = () => {

    const user = useSelector(state => state.auth);
    console.log(user);

    return (
        <section className="dashboard">
            <div className='side'>
                <h1 className="large text-primary">Dashboard</h1>
                <p className="lead">
            </div>
        </section>
    );
};

Error occurs only when it rendered by importing.

Please help me.

Answer 1

There's a bunch of things that might be wrong with your code (syntax and stuff). But I think the main problem is that your <Link to="/profileEditing"> GO </Link> needs to be inside the <Router />. Because otherwise, react-router can't handle the useHref method used by the <Link/> component.

Answer 2

I fixed the error. The problem is not because of code but because of node_modules. I remove package-lock.json and node_modules and reinstall it. And it works now.