Why is my create react app giving no output? - node.js

Question

I'm doing a tutorial for a basic CRUD app with React and Tailwind, this is my first time setting it up and I'm trying to display a navbar but when i run 'npm run start', the output is blank. Can anyone guide me as to why? Following this: https://www.unimedia.tech/2021/11/30/build-a-simple-crud-app-using-react-and-node/
App.js
import React from "react";
import { Link } from "react-router-dom";
export default function Navigate(){
return (
<nav class="flex items-center justify-between flex-wrap bg-green-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight">REACT CRUD APP</span>
</div>
<Link to="/">
<button class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-green-500 hover:bg-white mt-4 lg:mt-0">
HOME
</button>
</Link>
</nav>
)
}
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Navigate.js
import React from "react";
export default function Navigate(){
return (
<nav class="flex items-center justify-between flex-wrap bg-green-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight">REACT CRUD APP</span>
</div>
<div>
<button class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-green-500 hover:bg-white mt-4 lg:mt-0">
CREATE
</button>
</div>
</nav>
)
}
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
EDIT (New Output):

Answer 1

CHange your index.js file with this code. To work with Link you need to wrap your <App/> component with <BrowserRouter>. Also, it is best if you also add an output screenshot from the browser console as most of the time you will get detailed errors there.
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

Answer 2

So I have not worked with react recently so I don't know if something might be changed in the new react-router-dom version, but I am sure you need to wrap your App component into <Router></Router> tags to render the <Link> tag.
Make changes in App.js as below and it will display your navbar.
import React from "react";
import { Link, BrowserRouter as Router } from "react-router-dom";
export default function Navigate() {
return (
<Router>
<nav class="flex items-center justify-between flex-wrap bg-green-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight">
REACT CRUD APP
</span>
</div>
<Link to="/">
<button class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-green-500 hover:bg-white mt-4 lg:mt-0">
HOME
</button>
</Link>
</nav>
</Router>
);
Let me know if this solution works out.