如何从react-router v1迁移至v4？{this.props.children}迁移疑问

我太懂这种适应障碍了！React Router v4 完全推翻了 v1 那种集中式嵌套路由的思路，改成了组件级的路由放置，一开始确实会懵。咱们针对你提到的几个核心问题拆解一下：

1. 替代 {this.props.children}：从配置式嵌套到组件内路由 #

在 v1 里，你可能是这么写嵌套路由的：

// v1 集中式路由配置
<Router>
  <Route path="/" component={App}>
    <Route path="posts" component={Posts}>
      <Route path=":id" component={PostDetail} />
    </Route>
  </Route>
</Router>

// 然后在 App 组件里渲染 {this.props.children}
class App extends Component {
  render() {
    return (
      <div>
        <Header />
        {this.props.children} {/* 渲染子路由组件 */}
      </div>
    );
  }
}

到了 v4，这种嵌套逻辑直接放到组件里实现，不用再依赖顶层的嵌套路由配置，也不需要 {this.props.children} 来承接了：

// v4 组件内直接定义路由
class App extends Component {
  render() {
    return (
      <div>
        <Header />
        {/* 直接在 App 里写子路由 */}
        <Route path="/posts" component={Posts} />
      </div>
    );
  }
}

// Posts 组件里再定义更深的路由
class Posts extends Component {
  render() {
    return (
      <div>
        <h2>Posts List</h2>
        {/* 匹配 /posts/:id */}
        <Route path={`${this.props.match.url}/:id`} component={PostDetail} />
      </div>
    );
  }
}

这里的关键是用 this.props.match.url 来拼接子路由路径，保证路由层级的正确性，替代了 v1 里自动传递的 children。

2. HashRouter vs 自定义 history 的 Router #

你之前以为需要用 <Router history={history}> 是对的，但 v4 已经把常用的 history 封装成了专门的组件：

• <HashRouter>：内置了 hashHistory，会把 URL 的哈希部分（比如 http://example.com/#/posts/1）作为路由路径，适合静态页面部署（比如放在 GitHub Pages 上，没有后端路由支持的场景）。
• <BrowserRouter>：内置了 browserHistory，用标准的 URL 路径（比如 http://example.com/posts/1），需要后端配置所有路径都指向你的 index.html。

也就是说，如果你不需要自定义 history 的特殊逻辑（比如监听路由变化做额外处理），直接用 <HashRouter> 或者 <BrowserRouter> 就行，不用自己手动创建 history 对象传入 <Router>。比如：

// 直接用 HashRouter，不用手动传 history
import { HashRouter, Route } from 'react-router-dom';

ReactDOM.render(
  <HashRouter>
    <Route path="/" component={App} />
  </HashRouter>,
  document.getElementById('root')
);

如果确实需要自定义 history（比如要做路由跳转的拦截），才需要手动创建：

import { Router, Route } from 'react-router-dom';
import { createHashHistory } from 'history';

const history = createHashHistory();
// 可以给 history 添加监听
history.listen((location) => {
  console.log('路由变化了:', location.pathname);
});

ReactDOM.render(
  <Router history={history}>
    <Route path="/" component={App} />
  </Router>,
  document.getElementById('root')
);

迁移核心思路总结 #

• 放弃集中式的路由配置文件，把路由直接写到对应的组件里，哪里需要渲染子页面，就在哪里放 <Route>。
• 用 match.url 和 match.path 来处理嵌套路由的路径拼接，替代 v1 的 children 传递。
• 根据部署场景选择 <HashRouter> 或 <BrowserRouter>，不需要自定义 history 就直接用封装好的组件。

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