CODEWITHSUNDEEP
javascriptreactjsreact-dom
Chinmay
Chinmay

Reputation: 171

React-router-dom showing blank screen

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')
  );

Upvotes: 2

Views: 2181

Answers (2)

Drew Reese
Drew Reese

Reputation: 202721

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.

Upvotes: 2

Sujith Sandeep
Sujith Sandeep

Reputation: 1249

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.

Upvotes: 0

Related Questions