React Router v6.7中Link跳转URL变化但组件不渲染问题求助

• 使用React Router v6.7时，点击Navbar组件中的<Link>标签，URL成功追加/about路径，但对应的About组件未渲染
• 直接在地址栏输入/about能正常显示组件
• 期望：点击<Link>无需刷新页面，即可将对应组件渲染至DOM中
• 实际：仅URL发生变化，页面未渲染任何内容

相关代码 #

Navbar.js #

import React from 'react'
import PropTypes from 'prop-types'
import { Link, BrowserRouter } from 'react-router-dom'
export default function Navbar(props) {
    return (
        <BrowserRouter>
            <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
                <div className="container-fluid">
                    <Link className="navbar-brand" to="/">{props.title}</Link>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                            <li className="nav-item">
                                <Link className="nav-link active" aria-current="page" to="/">Home</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/about">{props.aboutText}</Link>
                            </li>
                            <li className="nav-item dropdown">
                                <Link className="nav-link dropdown-toggle" to="/" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    Dropdown
                                </Link>
                                <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><Link className="dropdown-item" to="/">Action</Link></li>
                                    <li><Link className="dropdown-item" to="/">Another action</Link></li>
                                    <li><hr className="dropdown-divider" /></li>
                                    <li><Link className="dropdown-item" to="/">Something else here</Link></li>
                                </ul>
                            </li>
                            <li className="nav-item">
                                <Link to="/" className="nav-link disabled">Disabled</Link>
                            </li>
                        </ul>
                        <div className="form-check form-switch mx-3">
                            <input className="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" onClick={props.toggleDarkMode} />
                            <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Dark Mode</label>
                        </div>
                        <form className="d-flex">
                            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                            <button className="btn btn-outline-success" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </nav>
        </BrowserRouter>
    )
}
Navbar.propTypes = {
    title: PropTypes.string.isRequired,
    aboutText: PropTypes.string
}

Navbar.defaultProps = {
    title: "Enter your Title",
    aboutText: "About"
}

App.js #

// import logo from './logo.svg';
import { useState } from 'react';
import './App.css';
import About from './components/About';
import Navbar from './components/Navbar';
import TextForm from './components/TextForm';

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <TextForm />,
  },
  {
    path: "/about",
    element: <About />
  }
]);

function App() {
  const [mode, setMode] = useState("light");
  const toggleDarkMode = (event) => {
    if (event.target.checked) {
      setMode("dark");
      document.body.style.backgroundColor = "#15181a";
      document.body.style.color = "white";
    }
    else {
      setMode("light");
      document.body.style.backgroundColor = "white";
      document.body.style.color = "black";
    }
  }
  return (
    <>
      <Navbar title="TextUtils" aboutText="About Us" mode={mode} toggleDarkMode={toggleDarkMode} />
      <RouterProvider router={router} />
    </>
  );
}

export default App;

问题根源 #

代码中创建了两个独立的Router实例：

1. Navbar组件内部包裹了<BrowserRouter>
2. App组件中通过createBrowserRouter+RouterProvider创建了另一个Router

React Router中，<Link>会触发它所在的最近Router实例的导航，但路由配置却属于另一个Router实例，导致导航事件无法同步到路由渲染逻辑，因此URL变化但组件不更新。直接地址栏输入能生效是因为浏览器刷新后，RouterProvider的实例会读取URL并渲染对应组件。

修复步骤 #

1. 移除Navbar组件中的<BrowserRouter>，因为createBrowserRouter+RouterProvider已经提供了全局Router上下文，无需嵌套。
2. 确保所有<Link>都处于同一个Router上下文下。

修改后的Navbar.js代码 #

import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom' // 仅保留Link，移除BrowserRouter
export default function Navbar(props) {
    return (
        // 去掉外层的<BrowserRouter>
        <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
            <div className="container-fluid">
                <Link className="navbar-brand" to="/">{props.title}</Link>
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                        <li className="nav-item">
                            <Link className="nav-link active" aria-current="page" to="/">Home</Link>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link" to="/about">{props.aboutText}</Link>
                        </li>
                        <li className="nav-item dropdown">
                            <Link className="nav-link dropdown-toggle" to="/" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Dropdown
                            </Link>
                            <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><Link className="dropdown-item" to="/">Action</Link></li>
                                <li><Link className="dropdown-item" to="/">Another action</Link></li>
                                <li><hr className="dropdown-divider" /></li>
                                <li><Link className="dropdown-item" to="/">Something else here</Link></li>
                            </ul>
                        </li>
                        <li className="nav-item">
                            <Link to="/" className="nav-link disabled">Disabled</Link>
                        </li>
                    </ul>
                    <div className="form-check form-switch mx-3">
                        <input className="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" onClick={props.toggleDarkMode} />
                        <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Dark Mode</label>
                    </div>
                    <form className="d-flex">
                        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                        <button className="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
    )
}
Navbar.propTypes = {
    title: PropTypes.string.isRequired,
    aboutText: PropTypes.string
}

Navbar.defaultProps = {
    title: "Enter your Title",
    aboutText: "About"
}

额外优化建议 #

如果需要让Navbar在所有路由页面都显示，可以将Navbar整合到路由布局中，避免重复渲染：

// 修改App.js中的router配置
import { Outlet } from 'react-router-dom'; // 新增导入Outlet

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <>
        <Navbar title="TextUtils" aboutText="About Us" mode={mode} toggleDarkMode={toggleDarkMode} />
        <Outlet /> {/* 用于渲染子路由的内容 */}
      </>
    ),
    children: [
      { path: "/", element: <TextForm /> },
      { path: "/about", element: <About /> }
    ]
  }
]);

// App组件的return简化为：
return <RouterProvider router={router} />;

这样Navbar会作为全局布局的一部分，自动出现在所有路由页面上方。

内容的提问来源于stack exchange，提问作者Debarka Mondal