React Router子路由导航栏无法正常工作问题求助

嘿，我之前也在React Router v3的嵌套路由上栽过跟头，你的问题大概率是路由配置或者组件渲染的环节出了问题，咱们一步步来排查解决：

1. 确保路由嵌套结构正确 #

子路由必须定义在对应父路由的嵌套结构里，不能和父路由平级。比如你的/book/booktwo需要作为/book的子路由存在：

import React, { Component } from 'react';
import { IndexRoute, Route, browserHistory, Link } from 'react-router';
import { Router } from 'react-router';
import Home from './components/Home';
import BookLayout from './components/BookLayout'; // 父路由的布局组件
import BookTwo from './components/BookTwo'; // 子路由组件

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home}>
          <IndexRoute component={Home} />
          {/* 父路由：/book */}
          <Route path="book" component={BookLayout}>
            {/* 子路由：/book/booktwo */}
            <Route path="booktwo" component={BookTwo} />
          </Route>
          {/* 其他普通路由 */}
          <Route path="about" component={About} />
        </Route>
      </Router>
    );
  }
}

同时，父路由组件（比如BookLayout）必须渲染{this.props.children}，这是子路由组件的挂载入口，否则子组件根本无法显示：

// BookLayout.jsx
import React, { Component } from 'react';

class BookLayout extends Component {
  render() {
    return (
      <div className="book-layout">
        {/* 这里可以放书籍模块的公共导航、头部等 */}
        <nav>
          <Link to="/book/booktwo">跳转到Book Two</Link>
        </nav>
        {/* 子路由组件会渲染在这里 */}
        {this.props.children}
      </div>
    );
  }
}

export default BookLayout;

2. 用Link组件替代普通<a>标签 #

导航栏里的链接一定要用React Router提供的Link组件，而不是原生的<a>标签——原生a标签会触发页面刷新，直接绕过React Router的路由机制，导致子路由失效：

// 正确写法
<Link to="/book/booktwo">Book Two</Link>

// 错误写法（会刷新页面，破坏单页路由）
<a href="/book/booktwo">Book Two</a>

3. 检查组件导入和路径拼写 #

确认你的子路由组件（比如BookTwo）已经正确导入，文件路径和组件名称没有拼写错误——这类低级错误很容易被忽略，但会直接导致路由找不到组件。

4. 开发环境的额外提醒 #

如果你是在本地开发，确保browserHistory的配置没有问题，React Router v3的browserHistory默认是支持嵌套路由的，不需要额外配置；但如果后续部署到服务器，需要配置服务器将所有路由请求 fallback 到index.html，否则刷新/book/booktwo这类路径会返回404。

按照上面的步骤调整后，你的子路由应该就能正常工作了！

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