Thank you in advance for reading this post.

I am working on SPA feature with react-router-dom. And I should say I am a learner of using it.

Despite reading number of previous posts here(e.g. this), I do not understand that why it thorws a blank page.

On localhost:3000, it displays nothing when I use from Navbar.js.

Did I miss something? I have searched for Link, Route, Routes, BrowserRouter. And my current conclusion is; to use:

1. BrowserRouter in index.js
2. Routes, Route in Navbar.js (the file I want to let it work as SPA).

// index.js - src > index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import Navbar from "./Navbar/Navbar";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Navbar />
    </BrowserRouter>
  </React.StrictMode>
);

// Navbar.js - src > Navbar > Navbar.js
import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "../pages/Home/Home";
import Experience from "../pages/Experience/Experience";
import History from "../pages/History/History";
import Projects from "../pages/Projects/Projects";

import NightMode from "./NightMode";
import "./Navbar.css";

function Navbar() {
  return (
    <Routes>
      <div className="wrapper">
        <div className="sidebar_left">
          <h2>Logo</h2>
          <ul>
            <li>
              <Route path="/" element={<Home />}>
                Home
              </Route>
            </li>
            <li>
              <Route path="/experience" element={<Experience />}>
                Experience
              </Route>
            </li>
            <li>
              <Route path="/history" element={<History />}>
                History
              </Route>
            </li>
            <li>
              <Route path="/projects" element={<Projects />}>
                Side Projects
              </Route>
            </li>
            <li>
              <a href="www.linkedin.com">Linkedin</a>
            </li>
          </ul>
        </div>
        <div className="main_content_right">
          <div className="header">
            <NightMode />
          </div>
          <hr></hr>

          <div className="info">
            <Home />
          </div>
        </div>
      </div>
    </Routes>
  );
}

export default Navbar;

// home.js - src > pages > Home > Home.js
import React from "react";
import "./Home.css";

// pdf
import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
import samplePDF from "../../pdf/test.pdf";

function Home() {
  return (
    <div className="home-wrapper">
      {/* layer very back */}
      <div className="home-content">
        <div className="home-text">
          {/* profile picture, box */}
          <img className="profile" src={require("../../images/me-photo.jpg")} />
          <hr />
          {/* {insert pdf here to let it display} */}
          <Document file={samplePDF}>
            <Page pageNumber={1} />
          </Document>
        </div>
      </div>
    </div>
  );
}

export default Home;

CodePudding user response：

Your index.js would be:

import { BrowserRouter } from 'react-router-dom';

and wrap it with BrowserRouter deleting Strict Mode.

<BrowserRouter>
   <App />
</BrowserRouter>

Your need to declare Navbar, and Home in App.js.

import {Routes,Route} from "react-router-dom";

function App() {
  return (
    <div>
      <Navbar></Navbar>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/navbar" element={<Navbar/>} />
      </Routes>
    </div>
  );
}

export default App;

In Navbar.js:

import { Link } from 'react-router-dom';
 function Navbar() {
   return(
<>
<li><Link to='/home'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
... ...

Install React Router v@6 and fix index.js; your index.js throws an error resulting blank page. Hope it will solve your problem.