0
231
ViewsReact-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 -
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')
);
·
Juan Pablo Isaza
3 answers
Answer question0
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.
·
Juan Pablo Isaza
Report
0
If your screen goes blank and you don't see any error then there must be some error in the console.
·
Juan Pablo Isaza
Report
0
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.
·
Juan Pablo Isaza
Report
Answer question