如何通过Route实现导航栏及子菜单的页面跳转？React路由配置方案咨询

Hey there! Let’s sort out your navigation routing problem so your menu items (including submenus) can properly link to new pages. The main issue in your current code is that you’re nesting <Router> components inside every single menu item and dropdown item—React Router only needs one Router instance at the root of your app to handle all routing. Having multiple Routers will break the routing context, which is why your links aren’t working as expected.

Here’s how to fix this step by step: #

1. Remove all <Router> components from Navbar.js and DropDown.js #

You don’t need to wrap each <Link> with a Router. Instead, we’ll place one Router at the top level of your app (usually in App.js) to provide the routing context for all links.

Modified Navbar.js:

import React, { useState } from "react";
import { navItems } from "./NavItems";
import { Link } from "react-router-dom";
import "./Navbar.css";
import DropDown from "./DropDown";

function Navbar() {
  const [dropDown, setDropdown] = useState(false);
  return (
    <div>
      <ul className="nav-items">
        {navItems.map((item) => {
          if (item.title === "Services") {
            return (
              <li 
                onClick={() => setDropdown(!dropDown)} 
                key={item.id} 
                className={item.cName} 
                onMouseEnter={() => setDropdown(true)} 
                onMouseLeave={() => setDropdown(false)} 
              >
                <Link to={item.path}>{item.title}</Link>
                {dropDown && <DropDown />}
              </li>
            );
          }
          return (
            <li key={item.id} className={item.cName}>
              <Link to={item.path}>{item.title}</Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default Navbar;

Modified DropDown.js:

import React from "react";
import { serviceDropdown } from "./NavItems";
import { Link } from "react-router-dom";
import "./DropDown.css";

function DropDown() {
  return (
    <div>
      <ul className="subnav-items">
        {serviceDropdown.map((item) => {
          return (
            <li key={item.id} className={item.cName}>
              <Link to={item.path}>{item.title}</Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default DropDown;

2. Set up your root Router and routes in App.js #

Wrap your entire app (including the Navbar and all page components) with a single <Router> instance, then define your routes using <Routes> (for React Router v6) or <Switch> (for v5).

Example App.js (React Router v6):

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
// Import your page components here
import Home from "./pages/Home";
import About from "./pages/About";
import Services from "./pages/Services";
import WebDesign from "./pages/WebDesign";
import GraphicDesign from "./pages/GraphicDesign";

function App() {
  return (
    <Router>
      {/* Navbar stays at the top so it's visible on all pages */}
      <Navbar />
      {/* Define all your page routes here */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/services" element={<Services />} />
        <Route path="/services/web-design" element={<WebDesign />} />
        <Route path="/services/graphic-design" element={<GraphicDesign />} />
        {/* Add more routes as needed */}
      </Routes>
    </Router>
  );
}

export default App;

3. Verify your path values match #

Make sure the path property in your navItems and serviceDropdown arrays exactly matches the route paths you defined in App.js. For example, if a submenu item has path: "/services/web-design", the corresponding Route in App.js should use that same path.

Quick note for React Router v5 users: #

If you’re using an older version of React Router, replace <Routes> with <Switch> and use the component prop instead of element:

<Switch>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
  {/* ... other routes */}
</Switch>

After making these changes, clicking any menu item (including submenu items) will correctly navigate to the corresponding page, since all <Link> components now share the single Router context from your root App component.

内容的提问来源于stack exchange，提问作者na ha