menu

Questions & Answers

React and Node show nothing when i run the localhost

i have a issue with my projec, i am doing everything just like the man of tutorial, but when i run the server, my http://localhost:3000/ show me nothing, there is not error, but neither do nothing. All this hapenned when i imported the react-roter-dom and changed the App.js

from This

function App() {
  return (
    <div>

    <h1>Hello world</h1> 
    </div>
  );
}

export default App;

to this

    import React from "react";
    import { createRoot } from "react-dom/client";
    import {
      createBrowserRouter,
      RouterProvider,
      Route,
      Link,
    } from "react-router-dom";
    import Login from "./pages/Login";
    import Register from "./pages/Register"
    
    const router = createBrowserRouter([
      
      {
        path: "/",
       element: <div> This is home  world!</div>,
      },
    
      
    
    ]);
    
    function App() {
      return (
        <div>
            <RouterProvider router={router}> </RouterProvider>
        </div>
      );

}

export default App;

and it should at least show the message "this is home world"

Please help me, Because i dont know what is hapening, no show error but it doesn't do anything either

this is what i got

enter image description here

after the router dom

before put the router dom show me " hello world" with this

function App() {
      return (
        <div>
    
        <h1>Hello world</h1> 
        </div>
      );
    }
    
    export default App;

index.JS


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

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

dev console

enter image description here

App.js 

import React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"

const router = createBrowserRouter([
  
  {
    path: "/",
   element: <div> This is home  world!</div>,
  },

  

]);

function App() {
  return (
    <div>
        <RouterProvider router={router}/>
    </div>
  );

}

export default App;

the consolo show me these errors

enter image description here

enter image description here

Comments:
2023-01-24 23:10:06
From reactrouter docs RouterProvider seems to require self-closing tag; try modify it into <RouterProvider router={router}/>
2023-01-24 23:10:06
No, it didn´t work -_-
2023-01-24 23:10:06
Can you share full index file and app file please? And please share your dev console.
2023-01-24 23:10:06
please look at the question again, i putted the index, app and dev conosole image
2023-01-24 23:10:06
@MoisesLeandroGonzalezDiaz go to the browser and right-click --> inspect --> click on the console. Now show this error message
2023-01-24 23:10:06
Ok, please see again the post, i edited and showed me some messages :)
Answers(1) :

I think you just didn't save the initial code. You might want to turn on autosave on your vs code. And use the normal react render method for your index and app files.

Index.js :

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

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

App.js:

import React from 'react'

const App = () => {
  return (
    <div>
      <h1>GPT-3</h1>
    </div>
  )
}

export default App

Try to run this but save the code or turn on auto-save

Comments:
2023-01-24 23:10:06
Is this a chatGPT generated answer? ReactDOM.render is deprecated in the later versions of React, in favor of createRoot.
2023-01-24 23:10:06
i got it man, it was a router error, the router dom was installed in other folder, not in the folder that i was thinking it was, by the way i´ll give you a like, thanks for your time.