ReactJs not rendering anything on page

Question

I've been working with the react router dom and I keep seeing a blank white page on my screen.

App.js:

import React from 'react';
import HelloWorld from './HelloWorld';
import { HashRouter as Router, Route } from 'react-router-dom';
import Home from './Home';

function App() {
  return (
    <Router>
      <Home />
      <Route path="/notes" exact element={HelloWorld} />
    </Router>
  );
}

export default App;

Home.js:

import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <Link to="/testHome" style={{ color: 'blue', fontSize: '20px' }}>
        Go to Notes
      </Link>
    </div>
  );
}

export default Home;

HelloWorld.js:

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
}

export default MyComponent;

Index.js:

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

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

When I simply display the components in app.js, I can clearly see the hello world element on the screen, the problem is when I use react router. When I use react router I just see a blank white page. Can anyone help me solve the issue?

you should follow the doc when create routes in your App.js file. — Layhout
– Layhout, Commented Dec 17, 2022 at 2:54
There will be an error in your console about how only <Route> elements are allowed as children of <Router> — Phil
– Phil, Commented Dec 17, 2022 at 2:58
@Phil I think you are thinking of the relationship between the Routes and Route components. — Drew Reese
– Drew Reese, Commented Dec 17, 2022 at 4:16

Drew Reese · Accepted Answer · 2022-12-17 04:22:29Z

1

There are a couple issues:

The Route component isn't being rendered by a Routes (or other Route component in the case of nested routes).
The element prop takes a React.ReactNode prop value, a.k.a. JSX.

To resolve import the Routes component and wrap the Route component and render the HelloWorld component as JSX.

import React from 'react';
import HelloWorld from './HelloWorld';
import {
  HashRouter as Router,
  Routes, // <-- import Routes
  Route
} from 'react-router-dom';
import Home from './Home';

function App() {
  return (
    <Router>
      <Home />
      <Routes> // <-- wrap rendered routes
        <Route
          path="/notes"
          element={<HelloWorld />} // <-- render as JSX
        />
      </Routes>
    </Router>
  );
}

answered Dec 17, 2022 at 4:22

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJs not rendering anything on page

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related