CODEWITHSUNDEEP
reactjsreact-router
Khan Naeem
Khan Naeem

Reputation: 19

React Screen Blank

I'm a beginner in react router and i don't know why , when i execute my code my screens appear to be white.. I tried everything but it still showing me same white blank screen again and again if anyone know how to deal with it please let me know Thanks!:)

import LearningComponent from './Component/LearningComponent';

import Header from './Component/header';
import Footer from './Component/footer';
import {BrowserRouter as Router,
  Routes,
  Route,
  Link
 } from "react-router-dom"

function App() {
  
  return (
   <div>
    <Header />
    <LearningComponent name="Naeem" />
    <Router>
    <ul>
      <li>
        <Link to="/" className='text-blue-500'>Home</Link>
      </li>
      <li>
        <Link to="/about" className='text-blue-500'>About</Link>
      </li>
    </ul>
    <Routes>
      <Route exact path='/'>
<h1>This is the Home Page</h1>
      </Route>
      <Route path='/about'>
<h1>This is the About Page</h1>
      </Route>
    </Routes>
    </Router>
    <Footer />
   </div>
  );
}

export default App;

Upvotes: -1

Views: 45

Answers (1)

Drew Reese
Drew Reese

Reputation: 202605

Issue

In react-router-dom@6 the Route component API changed significantly. There are no longer any component, and render and children function props, all replaced by a single element prop taking a React.ReactNode, a.k.a. JSX, as a prop value, and only other Route components are valid children in the case of nested routes.

Solution

Render the routed components as JSX on the Route component's element prop.

<Routes>
  <Route path='/' element={<h1>This is the Home Page</h1>} />
  <Route path='/about' element={<h1>This is the About Page</h1>} />
</Routes>

Upvotes: 1

Related Questions