React侧边栏菜单点击跳转右侧路由页面实现需求

步骤1：安装指定版本依赖 #

首先确保项目中安装了React Router Dom 5.3.1版本：

npm install react-router-dom@5.3.1
# 或使用yarn
yarn add react-router-dom@5.3.1

步骤2：改造SideNavbar组件 #

替换原有菜单链接为NavLink组件（自带激活状态样式），修改后的SideNavbar.js示例：

import React from 'react';
import { NavLink } from 'react-router-dom';
import './SideNavbar.css';

const SideNavbar = () => {
  return (
    <div className="side-navbar">
      <ul className="nav-menu">
        <li className="nav-item">
          <NavLink 
            exact 
            to="/" 
            className="nav-link" 
            activeClassName="active-link"
          >
            首页
          </NavLink>
        </li>
        <li className="nav-item">
          <NavLink 
            to="/dashboard" 
            className="nav-link" 
            activeClassName="active-link"
          >
            仪表盘
          </NavLink>
        </li>
        <li className="nav-item">
          <NavLink 
            to="/profile" 
            className="nav-link" 
            activeClassName="active-link"
          >
            个人资料
          </NavLink>
        </li>
        <li className="nav-item">
          <NavLink 
            to="/settings" 
            className="nav-link" 
            activeClassName="active-link"
          >
            设置
          </NavLink>
        </li>
      </ul>
    </div>
  );
};

export default SideNavbar;

• NavLink的activeClassName会在当前路由匹配时自动添加指定类名，可与你现有SideNavbar.css中的选中样式对应（比如设置背景色、文字颜色高亮）
• exact属性仅用于根路由/，避免其他以/开头的路由误匹配

步骤3：构建根路由布局（App.js） #

在根组件中用BrowserRouter包裹整个应用，同时设置侧边栏和内容区域的布局，内容区域通过Switch和Route渲染对应组件：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import SideNavbar from './SideNavbar';
// 导入你的业务组件（需自行创建）
import Home from './components/Home';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

import './App.css';

function App() {
  return (
    <Router>
      <div className="app-container">
        <SideNavbar />
        <main className="content-area">
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/profile" component={Profile} />
            <Route path="/settings" component={Settings} />
          </Switch>
        </main>
      </div>
    </Router>
  );
}

export default App;

步骤4：添加布局样式（App.css） #

确保侧边栏与内容区域横向排列：

.app-container {
  display: flex;
  height: 100vh;
}

.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

核心说明 #

• Switch组件确保仅渲染第一个匹配的路由，避免多个路由同时渲染
• 所有路由相关组件必须放在BrowserRouter（或HashRouter）的上下文范围内
• 若需要通过编程式跳转（比如按钮点击），可通过useHistory钩子调用history.push('/path')实现

内容的提问来源于stack exchange，提问作者Ranga chimalgi