I have some code for a React Application, and there's no errors when the app is tested, but it shows a blank page in the server. Upon closer inspection, it shows things like "Invalid hook call" or "uncaught type error" within the browser developer window. These are the exact errors

react.development.js:209  Warning: 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

Here's the App.js files and the Index.js files. I'm using tailwindcss that's imported in the index.css file. I haven't yet made the pages for the links present in the header.

App.js

import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
  return (
    <div className="header flex justify-between items-center py-4 px-6">
      <div className="links flex justify-end w-2/3">
        <Link to="/" className="mx-4 text-purple-600 font-cursive"> Home </Link>
        <Link to="/services" className="mx-4 text-purple-600 font-cursive"> Services </Link>
        <Link to="/contact" className="mx-4 text-purple-600 font-cursive"> Contact </Link> </div>
      <div className="title"> <h1 className="text-3xl text-pink-600 font-cursive">The Salon</h1> </div> </div>);
};
export default Header;

Index.js -

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Header from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Header />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.

It looks like there are a few issues with your code that could be causing the errors you mentioned.

Firstly, in your index.js file, you should be importing ReactDOM.render instead of ReactDOM.createRoot. The createRoot API is used for concurrent mode, which is an experimental feature in React and not recommended for production use yet.

So, replace this line:

const root = ReactDOM.createRoot(document.getElementById('root'));

With this:

const root = document.getElementById('root');

And change the root.render() method call to ReactDOM.render():

ReactDOM.render(
 <React.StrictMode>
  <Header />
 </React.StrictMode>,
 root
);

Secondly, in your App.js file, make sure that you have imported the react-router-dom library properly. It should be installed as a dependency using npm or yarn, and then imported like this:

import { Link } from 'react-router-dom';

Also, make sure that you have wrapped your Header component inside a BrowserRouter component in your index.js file, like this:

import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
 <BrowserRouter>
  <React.StrictMode>
   <Header />
  </React.StrictMode>
 </BrowserRouter>,
 root
);

With these changes, your code should be able to render the Header component without any errors, and you can proceed to create the pages for the links in the header.