如何使用react-router-dom切换路由时避免页面刷新

问题根源 #

当前代码用window.location.pathname = val.link跳转，属于原生浏览器跳转逻辑，会触发页面刷新；你之前尝试修改SideNav_Data中的link字段为<Link>组件，这是错误用法——数据数组应存储字符串路径而非React元素，直接导致渲染失败、侧边栏消失。

修复方案 #

使用react-router-dom提供的Link组件实现无刷新跳转，配合useLocation钩子判断当前激活路由，同时调整路由结构让侧边栏全局显示：

1. 修改侧边栏组件（SideNav.js）

import React from 'react'
import { SideNav_Data } from "./SideNav_Data"
import Sunrise from './Sunrise.png'
// 导入react-router-dom的核心组件与钩子
import { Link, useLocation } from 'react-router-dom'

function SideNav() {
  // 获取当前路由路径，替代原生window.location
  const location = useLocation()

  return (
    <div className = "SideNav">
        <img src={Sunrise} className='SideNavImg' alt=''/>
        <ul className="SideNavList">
            {SideNav_Data.map((val, key) => {
                return (
                    <li key={key} 
                    className = "row"
                    // 用路由钩子判断激活状态
                    id={location.pathname === val.link ? "active" : ""}>
                        {/* 用Link包裹可点击区域，实现无刷新跳转 */}
                        <Link to={val.link} style={{ textDecoration: 'none', color: 'inherit' }}>
                            <div id='icon'>{val.icon}</div>{" "}<div id='title'>{val.title}</div>
                        </Link>
                    </li>
                )
            })}
        </ul>
    </div>
  )
}

export default SideNav

2. 调整App.js的路由结构

将侧边栏移至Routes外部，确保所有页面都能显示侧边栏，同时保持路由切换无刷新：

import './App.css';
import { BrowserRouter as Router, Routes, Route} from "react-router-dom"
import SideNav from './Components/SideNav'; // 全局引入侧边栏
import Home from './Pages/Home';
import Cars from './Pages/Cars';
import Reps from './Pages/Reps';
import LoanEst from './Pages/LoanEst';
import Account from './Pages/Account';
import Support from './Pages/Support';

function App() {
  return (
    <Router>
      {/* 全局侧边栏，所有路由页面共享 */}
      <SideNav />
      <Routes>
        <Route path='/' element={<Home />}/>
        <Route path="/Cars" element={<Cars />}/>
        <Route path="/Representatives" element={<Reps />}/>
        <Route path="/Loan-Estimator" element={<LoanEst />}/>
        <Route path="/Account" element={<Account />}/>
        <Route path="/Support" element={<Support />}/>
      </Routes>
    </Router>
  )
}

export default App;

3. 优化Home页面代码

由于侧边栏已全局显示，Home页面无需再单独引入：

import React from 'react'

function Home() {
  return (
    <div>
      {/* 此处放置Home页面专属内容 */}
      <h1>首页内容</h1>
    </div>
  )
}

export default Home

关键注意事项 #

• 保持SideNav_Data中的link字段为字符串路径，不要存储React元素
• Link组件必须在Router上下文内使用，确保侧边栏被包裹在Router组件中
• 用useLocation钩子替代原生window.location，更适配React Router的路由状态管理
• 通过style属性移除Link默认的下划线和颜色变化，保持侧边栏样式统一

内容的提问来源于stack exchange，提问作者Chase Hutcheson