ReactJS导航时页面刷新问题求助：如何实现无刷新导航？

问题原因 #

当前使用的<MDBNavbarLink>通过href属性触发浏览器默认跳转行为，导致页面刷新，违背了React单页应用无刷新导航的特性。

解决方案 #

1. 导入React Router导航组件

在导航栏组件文件顶部，导入react-router-dom提供的Link：

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

2. 修改导航栏代码（二选一）

方法一：适配MDB组件保留样式

利用MDB组件的as属性，将<MDBNavbarLink>转为React Router的导航组件，同时保留原有样式：

<MDBNavbarNav fullWidth={false} className="mb-2 mb-lg-0">
  <MDBNavbarLink 
    active 
    aria-current="page" 
    as={Link} 
    to="/" 
    className="pe-5"
  >
    Home
  </MDBNavbarLink>
  <MDBNavbarLink 
    active 
    as={Link} 
    to="/features" 
    className="pe-5"
  >
    Features
  </MDBNavbarLink>
  <MDBNavbarLink 
    active 
    as={Link} 
    to="/contact" 
    className="pe-3"
  >
    Contact Us
  </MDBNavbarLink>
</MDBNavbarNav>

注意：修正了原代码中错误的路径（比如/#改为/features，#改为/contact），确保与路由规则匹配。

方法二：直接使用React Router的Link组件

如果MDB组件适配有问题，直接用<Link>并添加MDB样式类：

<MDBNavbarNav fullWidth={false} className="mb-2 mb-lg-0">
  <Link 
    to="/" 
    className="nav-link active pe-5" 
    aria-current="page"
  >
    Home
  </Link>
  <Link 
    to="/features" 
    className="nav-link active pe-5"
  >
    Features
  </Link>
  <Link 
    to="/contact" 
    className="nav-link active pe-3"
  >
    Contact Us
  </Link>
</MDBNavbarNav>

3. 调整路由配置

• 确保导航栏组件被包裹在<Router>内部（否则导航组件无法获取路由上下文）
• 补充Contact Us对应的路由规则：

<div className="App">
  <Router>
    {/* 将Navbar移到Router内部 */}
    <Navbar />
    <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/features" element={<Features />}></Route>
      <Route path="/contact" element={<ContactUs />}></Route>
      <Route path="*" element={<PageNotFound />}></Route>
    </Routes>
  </Router>
</div>

关键提示 #

• 所有导航操作必须通过React Router提供的组件/API完成，避免使用原生a标签的href属性
• 导航组件必须处于<Router>的上下文范围内才能正常工作

内容的提问来源于stack exchange，提问作者Mohan Raj