旧版React Router代码迁移至react-router@4.2.0方法咨询

React Router v4 和之前版本相比有根本性的变化——从集中式路由配置转向了组件化的声明式路由，下面我会一步步帮你把示例代码转换成适配 v4.2.0 的版本。

1. 替换模块引入方式 #

旧版是从 react-router 统一引入，v4 把浏览器端的路由功能拆分到了 react-router-dom 库中，你需要调整引入逻辑：

旧代码引入： #

var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;

v4.2.0 引入： #

// 用解构语法一次性引入需要的路由组件
var { BrowserRouter, Route, Switch } = require('react-router-dom');
// 不习惯解构的话也可以分开引入：
// var BrowserRouter = require('react-router-dom').BrowserRouter;
// var Route = require('react-router-dom').Route;
// var Switch = require('react-router-dom').Switch;

2. 重构路由结构 #

v4 不再需要单独定义 routes 变量，而是直接在组件中用路由组件声明规则，核心变化如下：

• 移除 DefaultRoute：用带 exact 属性的 Route path="/" 替代，确保只匹配根路径
• 将 handler 属性改为 component 属性
• 用 BrowserRouter 作为路由根容器，Switch 确保只有第一个匹配的路由被渲染
• 嵌套路由需要放到父组件（这里是 APP）内部，而非集中配置

旧代码路由配置： #

var routes = (
  <Route handler={APP}>
    <DefaultRoute handler={Audience} />
    <Route name="speaker" path="speaker" handler={Speaker}></Route>
    {/* 其他路由 */}
  </Route>
);

v4.2.0 等价实现 #

首先修改根渲染逻辑，用 BrowserRouter 包裹整个应用：

// 替换你原本的 Router.run 渲染逻辑
ReactDOM.render(
  <BrowserRouter>
    {/* 把 APP 作为根路由组件，所有子路由在 APP 内部定义 */}
    <Route path="/" component={APP} />
  </BrowserRouter>,
  document.getElementById('root') // 替换成你的实际根DOM节点ID
);

然后在 APP 组件的 render 方法中添加子路由：

// APP 组件的 render 方法
render() {
  return (
    <div className="app-container">
      {/* 这里放 APP 原本的内容，比如导航栏、全局布局等 */}
      
      {/* 用 Switch 包裹子路由，确保只渲染第一个匹配的路由 */}
      <Switch>
        {/* exact 属性确保只有根路径 / 匹配这个组件，替代旧版 DefaultRoute */}
        <Route exact path="/" component={Audience} />
        {/* speaker 路由需要写完整路径 /speaker */}
        <Route path="/speaker" component={Speaker} />
        {/* 其他路由按同样格式添加即可 */}
      </Switch>
    </div>
  );
}

3. 其他注意事项 #

• 旧版的 name 属性不再需要：如果需要跳转路由，使用 react-router-dom 提供的 Link 组件，直接指定目标路径，比如 <Link to="/speaker">Go to Speaker</Link>
• 404页面处理：在 Switch 的最后添加一个无 path 属性的 Route，作为默认匹配项：

  <Route component={NotFound} />
  

• 确保已安装依赖：如果还没安装 react-router-dom，执行 npm install react-router-dom@4.2.0 --save

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