blank white screen no any console error !
Tags: react, vite, webdev, node
Published: 2023-07-26 05:33:23

`**app.jsx 
**
import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes, Outlet } from 'react-router-dom'; // Import 'Routes' and 'Outlet'

import BooksPage from './BooksPage.jsx';
import BookDetailsPage from './BookDetailsPage.jsx';
import QuotesPage from './QuotesPage.jsx';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/books">Books</Link>
          </li>
          <li>
            <Link to="/quotes">Quotes</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/books/:bookId" element={<BookDetailsPage />} />
        <Route path="/books" element={<BooksPage />} />
        <Route path="/quotes" element={<QuotesPage />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

function Home() {
  return <h1>Welcome to the Books Web Application!</h1>;
}

export default App;

**main.jsx  
**
 import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

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

**quotespage.jsx **

 import React, { useState, useEffect } from 'react';

function QuotesPage() {
  const [quotes, setQuotes] = useState([
    { text: 'Quote 1', character: 'Character 1' },
    { text: 'Quote 2', character: 'Character 2' },
    { text: 'Quote 3', character: 'Character 3' },
    // Add more test quotes here...
  ]);

  return (
    <div>
      <h1>Quotes Page</h1>
      {quotes.map((quote, index) => (
        <div key={index}>
          <p>{quote.text}</p>
          <p>- {quote.character}</p>
        </div>
      ))}
    </div>
  );
}

export default QuotesPage;
**bookspage.jsx ** 
// src/BooksPage.js
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

function BooksPage() {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    fetch('https://seussology.info/api/books')
      .then((response) => response.json())
      .then((data) => setBooks(data));
  }, []);

  return (
    <div>
      <h1>Books Page</h1>
      {books.map((book) => (
        <Link key={book.id} to={`/books/${book.id}`}>
        </Link>
      ))}
    </div>
  );
}

export default BooksPage;

**bookdetailspage.jsx  
**  // src/BookDetailsPage.js
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function BookDetailsPage() {
  const { bookId } = useParams();
  const [bookDetails, setBookDetails] = useState(null);

  useEffect(() => {
    fetch(`https://seussology.info/api/books/${bookId}`)
      .then((response) => response.json())
      .then((data) => setBookDetails(data));
  }, [bookId]);

  if (!bookDetails) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{bookDetails.title}</h1>
      <p>{bookDetails.description}</p>
    </div>
  );
}

export default BookDetailsPage;


i got white blank screen how can i solve it ??`