React Router 4嵌套路由无法正常工作问题求助

你遇到的Dashboard里PostPage打不开的问题，大概率是嵌套路由的配置逻辑没理顺，我给你梳理下常见的坑和对应的修复方案，对照你的代码就能找到问题啦：

核心问题分析 #

嵌套路由的关键是父组件（Dashboard）要负责渲染子路由内容，如果只是在App的根路由里单独配置PostPage，那访问时会跳出Dashboard的布局，甚至因为路由匹配不到而无法显示。另外路径写法、Link跳转地址也是常见的出错点。

修复方案（分react-router-dom版本） #

情况1：用的是react-router-dom v5（你的代码里有Switch，大概率是这个版本） #

1. 先修正App.js里的根路由配置

根路由里的Dashboard路由不要加exact，否则子路由/dashboard/posts会匹配不到父路由，导致Dashboard根本不渲染：

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { LoginPage } from './LoginPage';
import { Dashboard } from './Dashboard';

function App() {
  // 从redux获取登录状态
  const isAuthenticated = true; // 替换成你的redux状态判断

  return (
    <div className="App">
      <Switch>
        <Route path="/login" component={LoginPage} />
        {/* 父路由不写exact，允许子路由匹配 */}
        <Route path="/dashboard" render={() => 
          isAuthenticated ? <Dashboard /> : <Redirect to="/login" />
        } />
        <Redirect from="/" to="/dashboard" />
      </Switch>
    </div>
  );
}

2. 重构Dashboard组件，内部包含子路由

在Dashboard里加入侧边菜单和子路由的渲染区域，用useRouteMatch来动态拼接子路由路径（避免硬编码）：

import React from 'react';
import { Switch, Route, Link, useRouteMatch } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
import { PostPage } from './PostPage';
import { HomePage } from './HomePage'; // 假设你有首页子组件

function Dashboard({ logout }) {
  // 获取当前父路由的匹配对象，用来拼接子路径
  const match = useRouteMatch();

  return (
    <div style={{ display: 'flex' }}>
      {/* 侧边菜单 */}
      <aside style={{ width: '200px', backgroundColor: '#f5f5f5', padding: '1rem' }}>
        <ul style={{ listStyle: 'none', padding: 0 }}>
          <li style={{ marginBottom: '1rem' }}>
            <Link to={`${match.url}`}>首页</Link>
          </li>
          <li style={{ marginBottom: '1rem' }}>
            {/* 用match.url拼接子路径，确保跳转到Dashboard下的/posts */}
            <Link to={`${match.url}/posts`}>文章页面</Link>
          </li>
          <li>
            <button onClick={logout}>退出登录</button>
          </li>
        </ul>
      </aside>

      {/* 右侧内容区：渲染子路由 */}
      <main style={{ flex: 1, padding: '1rem' }}>
        <Switch>
          {/* 匹配Dashboard根路径，显示首页 */}
          <Route exact path={match.path} component={HomePage} />
          {/* 匹配/posts子路径，显示PostPage */}
          <Route path={`${match.path}/posts`} component={PostPage} />
        </Switch>
      </main>
    </div>
  );
}

// Redux连接逻辑
const mapStateToProps = state => ({
  // 这里可以获取用户信息等状态
});

const mapDispatchToProps = dispatch => ({
  logout: () => dispatch(userActions.logout())
});

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

情况2：用的是react-router-dom v6（如果是新版本） #

v6的嵌套路由写法更简洁，用Outlet来渲染子内容：

1. App.js根路由配置

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { LoginPage } from './LoginPage';
import { Dashboard } from './Dashboard';
import { HomePage } from './HomePage';
import { PostPage } from './PostPage';

function App() {
  const isAuthenticated = true; // 替换成你的登录状态判断

  return (
    <div className="App">
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        {/* 嵌套路由：父路由下定义子路由 */}
        <Route path="/dashboard" element={
          isAuthenticated ? <Dashboard /> : <Navigate to="/login" />
        }>
          <Route index element={<HomePage />} /> {/* index表示父路由的默认子页面 */}
          <Route path="posts" element={<PostPage />} />
        </Route>
        <Route path="*" element={<Navigate to="/dashboard" />} />
      </Routes>
    </div>
  );
}

2. Dashboard组件用Outlet渲染子内容

import React from 'react';
import { Link, Outlet, useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';

function Dashboard({ logout }) {
  const navigate = useNavigate();

  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', backgroundColor: '#f5f5f5', padding: '1rem' }}>
        <ul style={{ listStyle: 'none', padding: 0 }}>
          <li style={{ marginBottom: '1rem' }}>
            <Link to="/dashboard">首页</Link>
          </li>
          <li style={{ marginBottom: '1rem' }}>
            <Link to="/dashboard/posts">文章页面</Link>
          </li>
          <li>
            <button onClick={() => {
              logout();
              navigate('/login');
            }}>退出登录</button>
          </li>
        </ul>
      </aside>

      {/* Outlet会自动渲染匹配到的子路由内容 */}
      <main style={{ flex: 1, padding: '1rem' }}>
        <Outlet />
      </main>
    </div>
  );
}

// Redux连接逻辑同上
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

关键检查点 #

1. 父路由是否允许子路由匹配：v5不要加exact，v6要正确使用嵌套Route或加/*
2. 子路由是否在父组件内部渲染：不能把PostPage的路由单独放在根路由里，必须让Dashboard负责渲染它
3. Link的跳转地址是否正确：要指向/dashboard/posts而不是/posts，否则会跳出Dashboard布局

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