React-router-dom showing blank screen

user_18732655 0
Viewed 777

I am trying to figure out React and am not sure what is wrong here, as the browser shows a blank.

Here is the Code.

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
import Home from './Home';

function App() {
    return (
        <>
            <Router>
                <Routes>
                    <Route exact path="/" element={<Home />}/>
                </Routes>
            </Router>
        </>
    );
  }
  
export default App;

Update 1 -

console error

The code as viewed on index.js

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

ReactDOM.createRoot(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
react-dom reactjs javascript
3 Answers

This is a react@18 change in how React apps are rendered. createRoot takes a DOMNode reference, not JSX. Once the root is created, then you can call a render method on it.

Example:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

See react-dom-client for more in-depth detail.

user_86908570

If your screen goes blank and you don't see any error then there must be some error in the console.

user_126362550

I don't find any error in this page. Check whether you have imported the home component properly here. If it is imported properly, Check the home component for errors. You can also check whether you are getting any errors or warnings in the console.

user_124679930
Related