React 项目中的 NavLink 组件未显示在屏幕上

Question

I'm new to React and I'm trying to use react-router to build a Single Page Application. What I mean is to link all pages ( Home , About , Login , etc) in the navigation bar by using <NavLink> component from react-router-dom . The result turns out is a blank screen with nothing showing up. Please help me to fix this issue, I have attached my source code below (in JavaScript and TailwindCSS):

App.js

import React from "react";
import NavBar from "./components/NavBar";
import About from "./components/About";
import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <>
      <BrowserRouter>
        <NavBar />
        <div className="container mt-2" style={{ marginTop: 40 }}>
          <Routes>
            <Route path="/about">
              <About />
            </Route>
            ...
          </Routes>
        </div>
      </BrowserRouter>
    </>
  );
}

export default App;

NavBar.js

import React, { useState } from "react";
import { NavLink } from "react-router-dom";


const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    <nav
      className="relative flex flex-wrap items-center justify-between px-2 py-2 bg-white-500 mb-3 border-b-2 drop-shadow-md"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
        <NavLink
          className="navbar-item"
          activeClassName="is-active"
          to="/"
          exact
        >
          BrandNAME
        </NavLink>
        
        <div className={`navbar-menu ${isOpen && "is-active"}`}>
          <div className="flex flex-col lg:flex-row list-none lg:ml-auto">
            <NavLink
              className="navbar-item px-3 py-2 flex items-center text-md leading-snug text-black cursor-pointer hover:opacity-75"
              activeClassName="is-active"
              to="/about"
            >
              About
            </NavLink>

            <NavLink
              className="navbar-item px-3 py-2 flex items-center text-md leading-snug text-black cursor-pointer hover:opacity-75"
              activeClassName="is-active"
              to="/socials"
            >
              Socials
            </NavLink>
          </div>

          <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
                <a className="button is-white">Log in</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};
export default Navbar;

and an example of About.js

import React from "react";

const About = () => (
  <div>
    <h1 className="title is-1">This is the About Page</h1>
    <p>
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus
      et ultrices posuere cubilia curae; Duis consequat nulla ac ex consequat,
      in efficitur arcu congue. Nam fermentum commodo egestas.
    </p>
  </div>
);

export default About;

Answer 1

In react-router-dom@6 the Route component API changed significantly. Only another Route component is a valid child component, the routed content should be rendered on the Route component's element prop. The element prop takes a ReactNode , aka JSX.

Route

declare function Route( props: RouteProps ): React.ReactElement | null; interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactNode | null; index?: boolean; path?: string; }

Example:

<Routes>
  <Route path="/about" element={<About />} />
  ...
</Routes>

Answer 2

If you are using react-router-dom version 6 you should import like this:

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

And use like this:

    <>
      <Router>
        <NavBar />
        <div className="container mt-2" style={{ marginTop: 40 }}>
          <Routes>
            <Route path="/about" exact element={<About/>}>
            ...
          </Routes>
        </div>
       </Router>
    </>