React Router初始加载时不渲染组件问题求助

我之前也碰到过几乎一模一样的问题！结合你的代码来看，最核心的问题出在根文件的初始渲染逻辑上，咱们先解决这个：

1. 初始渲染未触发 #

看你的根入口代码，你定义了render函数，但只在热更新的回调里调用了它，初始加载时根本没执行render(App)！这就导致页面一开始是空的，只有当你修改文件触发热更新时，module.hot.accept里的回调才会调用render，页面才会显示内容。

修复方法很简单，在根文件的最后（registerServiceWorker();之前或之后）加上一行：

render(App);

完整的根文件末尾应该是这样：

if (module.hot) {
  module.hot.accept('./views/app', () => {
    render(require('./views/app').default);
  })
}

// 新增这行，触发初始渲染
render(App);

registerServiceWorker();

2. 额外的优化建议（避免后续类似问题） #

解决上面的问题后应该就能正常显示了，不过还有几个点可以优化，防止其他隐性问题：

• 替换废弃的生命周期钩子：componentWillMount和componentWillReceiveProps已经被React标记为不安全（React 16.3+版本），建议换成：
  • 把componentWillMount里的逻辑移到componentDidMount（异步数据加载放在这里更可靠）
  • 用componentDidUpdate替代componentWillReceiveProps，比如：

    componentDidUpdate(prevProps) {
      if (prevProps.location.search !== this.props.location.search) {
        this.props.filterTasks(
          this.getFilterParam(this.props.location.search)
        );
      }
    }
    

• 处理filter参数为null的情况：当location.search为空时，getFilterParam会返回null，你可以给filterTasks加个默认值，比如：

  getFilterParam(search) {
    const params = new URLSearchParams(search);
    // 如果没有filter参数，返回默认值比如'all'
    return params.get('filter') || 'all';
  }
  

• 简化路由嵌套：你的App组件里已经包含了<Route>，根文件里的<ConnectedRouter>只需要包裹App即可，目前的写法没问题，但可以去掉根里没用的TaskPage import，保持代码整洁。

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