ReactJS中如何在两个不同组件中使用react router v4路由

嘿，我之前也碰到过一模一样的问题！你这个情况大概率是因为路由组件没有被限制在Viewport的内容容器内，而是直接渲染在了根节点层级，脱离了侧边栏和顶部导航的布局上下文，所以才会占满整个浏览器窗口。下面给你一步步的解决办法：

核心思路 #

我们需要把动态渲染的页面组件，严格限制在Viewport里专门预留的「内容区域」中，同时利用React Router v4的嵌套路由特性，把页面级路由写在Viewport组件内部，而不是根路由里。

具体实现步骤 #

1. 调整根路由（index.js） #

根路由只负责处理登录页和Viewport的切换，不要把页面级路由（比如Dashboard、Settings）写在这里：

import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import Login from './Login';
import Viewport from './Viewport';

function App() {
  // 这里替换成你实际的登录状态判断逻辑
  const isLoggedIn = localStorage.getItem('user') !== null;

  return (
    <Router>
      {/* 登录页路由 */}
      <Route exact path="/login" component={Login} />
      {/* 登录后渲染Viewport，未登录则重定向到登录页 */}
      <Route path="/" render={() => 
        isLoggedIn ? <Viewport /> : <Redirect to="/login" />
      } />
    </Router>
  );
}

export default App;

2. 重构Viewport组件，添加嵌套路由 #

在Viewport里明确划分布局结构：顶部导航栏、侧边栏、内容容器，然后把页面级路由放在内容容器里渲染：

import { Route, Switch, Redirect } from 'react-router-dom';
import Sidebar from './Sidebar';
import TopNavbar from './TopNavbar';
import Dashboard from './Dashboard';
import Settings from './Settings';
import Profile from './Profile';

function Viewport() {
  return (
    <div className="viewport-wrapper">
      {/* 顶部导航栏 */}
      <TopNavbar />
      <div className="main-content-wrapper">
        {/* 侧边栏 */}
        <Sidebar />
        {/* 关键：专门的内容容器，所有动态页面都在这里渲染 */}
        <div className="page-content">
          <Switch>
            <Route exact path="/dashboard" component={Dashboard} />
            <Route path="/settings" component={Settings} />
            <Route path="/profile" component={Profile} />
            {/* 默认路由，没匹配到的话重定向到仪表盘 */}
            <Redirect to="/dashboard" />
          </Switch>
        </div>
      </div>
    </div>
  );
}

export default Viewport;

3. 用CSS约束布局，防止内容溢出 #

给各个布局区域添加样式，确保内容容器只占据侧边栏和导航栏之外的空间：

/* 全局重置或基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.viewport-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保Viewport占满视口高度，但内部元素不会溢出 */
}

/* 顶部导航栏 */
.top-navbar {
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.main-content-wrapper {
  display: flex;
  flex: 1; /* 占据Viewport除了顶部导航之外的剩余高度 */
}

/* 侧边栏 */
.sidebar {
  width: 240px;
  background-color: #f5f7fa;
  border-right: 1px solid #e0e0e0;
  padding: 20px 0;
}

/* 内容容器：所有动态页面的父容器 */
.page-content {
  flex: 1; /* 占据侧边栏之外的剩余宽度 */
  padding: 24px;
  overflow-y: auto; /* 内容过多时可以滚动 */
}

4. 侧边栏导航用Link组件 #

确保侧边栏的导航链接使用React Router的Link组件，这样路由切换会在Viewport内部进行，不会刷新页面：

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

function Sidebar() {
  return (
    <div className="sidebar">
      <ul style={{ listStyle: 'none' }}>
        <li style={{ padding: '8px 20px' }}>
          <Link to="/dashboard" style={{ textDecoration: 'none', color: '#333' }}>仪表盘</Link>
        </li>
        <li style={{ padding: '8px 20px' }}>
          <Link to="/settings" style={{ textDecoration: 'none', color: '#333' }}>设置</Link>
        </li>
        <li style={{ padding: '8px 20px' }}>
          <Link to="/profile" style={{ textDecoration: 'none', color: '#333' }}>个人资料</Link>
        </li>
      </ul>
    </div>
  );
}

export default Sidebar;

关键注意点 #

• 嵌套路由必须写在父组件（Viewport）内部，这样路由组件才会渲染在父组件的指定容器里，而不是根节点
• 通过Flex布局明确各个区域的尺寸关系，内容容器用flex:1来占据剩余空间，而不是默认的块级元素占满整个窗口
• 不要直接在根路由里渲染页面组件，否则它们会脱离Viewport的布局结构

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