Solution 1 :

I am gussing probably this is the issue. You are using React <18 and trying to use createRoot which is not there.


//Don't use below because it's in React 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);


let rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Here is working example

Solution 2 :

The code is working properly now. The issue was that i installed react-router-dom one folder above the normal rreact app so that i had two seperate package.json files. I’ve uninstalled react-router-dom and reinstalled it in the same folder of the react folder. The json files got merged and then it worked after reloading

Problem :

The code down below shows my work in react, where i freshly startet my project and i am still pretty new in this kind of area. I have one simple question that i am just cant comprehend. Its probalby something simple. I expected the h1 with the text Hi too get rendered or to get foo as output, but my website isnt showing any text at all


import './App.css';
import Navbar from './Components/Navbar';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom'

function App() {
  return (

    <div className='App'>
      <h1> Hi </h1>
          <Route path='/' exact/>

export default App;


import './Navbar.css';
import React, {useState} from 'react'
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav className='navbar'>
        <div className='navbar-container'>
            <Link to="/" >foo</Link>

export default Navbar;


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

const root = ReactDOM.createRoot(document.getElementById('root'));
    <App />

After further testing it has shown that when i delete everything in the return function of App.js except the h1 Hi gets rendered.


Comment posted by Surya

what is url u r trying ?

Comment posted by Jigen

I copied down each file and it worked fine. Hi and foo get shown. My assumptions are toward CSS so.

Comment posted by…

I recomend you install the Chrome React Developer tools so you can debug more easily