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?

CodePudding user response：

There are a couple issues:

1. The Route component isn't being rendered by a Routes (or other Route component in the case of nested routes).
2. 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>
  );
}

CodePudding user response：

Try this:

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