Webpack 4 + React Router 子路径返回null问题求助

结合你提供的代码片段和日常开发的踩坑经验，我整理了几个最可能的原因及对应的解决方案：

1. Webpack Dev Server 未配置historyApiFallback #

当使用createBrowserHistory（也就是BrowserRouter的底层实现）时，刷新子路由（比如/user）时，浏览器会直接向服务器请求该路径的文件，但Webpack Dev Server默认找不到对应文件就会返回null。

解决方法是在webpack.config.js的devServer中开启historyApiFallback：

module.exports = {
  // 其他配置项...
  devServer: {
    historyApiFallback: true, // 核心配置，让所有404请求都指向index.html
    publicPath: '/' // 确保这里和output的publicPath保持一致
  }
};

2. 路由代码不完整或exact属性使用不当 #

从你给出的代码来看，/user的路由定义被截断了（compon...），首先要确认：

• 对应的组件已经正确引入并赋值给component属性
• exact属性的使用符合你的路由逻辑：
  • 如果/user是独立页面、没有子路由，加exact没问题
  • 如果/user下还有子路由（比如/user/profile），不能加exact，否则子路由会匹配不到

修正后的完整路由示例：

import * as React from 'react';
import {Route, Router, Switch, Redirect} from 'react-router-dom';
import { createBrowserHistory } from 'history';
import SignIn from "./pages/auth/signIn";
import Home from "./pages/home";

let history = createBrowserHistory();
class App extends React.Component {
  render(){
    return(
      <Router history={history}>
        <Switch>
          <Route exact path='/' component={Home}/>
          {/* 确保组件正确引入，根据需求选择是否加exact */}
          <Route exact path='/user' component={SignIn}/>
          {/* 兜底路由，处理未匹配到的路径 */}
          <Redirect to='/' />
        </Switch>
      </Router>
    )
  }
}

3. Webpack Output 未设置正确的publicPath #

如果打包后的资源路径因为子路由出现错误，也可能导致页面加载异常返回null。需要在webpack.config.js的output中设置publicPath为根路径：

const path = require('path');

module.exports = {
  // 其他配置项...
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/' // 确保资源从根路径加载，不受当前路由影响
  }
};

按这几个步骤排查，基本就能解决子路径返回null的问题啦。

内容的提问来源于stack exchange，提问作者Trọng Nguyễn Công