Webpack无法解析React组件求助：引入React Router后报错

我来帮你拆解下这个报错的核心原因，主要有两个点需要修正：

1. 绝对路径未被Webpack正确解析 #

你在导入组件时用了/components/FrontPage这种以斜杠开头的绝对路径，但Webpack默认会把这个斜杠当成系统根目录（比如你的Mac里的/），而不是项目的src目录，自然找不到对应的组件文件。

解决方法（二选一即可）： #

方法A：改用相对路径导入

把导入语句改成相对于当前文件（index.js在src目录下）的相对路径，这种方式不用修改Webpack配置，简单直接：

import FrontPage from './components/FrontPage';
import Political from './components/Political';
import Login from './components/Login';

方法B：配置Webpack识别项目根路径

如果你偏好使用绝对路径，可以在webpack.config.js里添加resolve配置，告诉Webpack优先去src目录下找模块：

const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./public/index.html",
  filename: "./index.html"
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  // 新增resolve配置
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  },
  plugins: [htmlPlugin],
  devServer: { port: 3000 }
};

配置后你就可以用import FrontPage from 'components/FrontPage'（去掉开头的斜杠）来导入组件了。

2. React Router组件导入错误 #

你现在的导入写法不符合react-router-dom的导出规则：

import BrowserRouter from 'react-router-dom';
import Route from 'react-router-dom';

BrowserRouter和Route都是react-router-dom的命名导出，不是默认导出，必须用解构语法导入：

import { BrowserRouter, Route } from 'react-router-dom';

如果不改这个，后续渲染时会因为拿到的不是正确的组件而报错。

额外优化建议 #

给根路径的Route加上exact属性，不然访问/political或/login时，会同时渲染FrontPage组件（因为/是所有路径的前缀）：

<Route exact path='/' component={FrontPage} />

最终修正后的index.js示例 #

import React from "react";
import ReactDOM from "react-dom";
import FrontPage from './components/FrontPage';
import Political from './components/Political';
import Login from './components/Login';
import { BrowserRouter, Route } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <div>
      <Route exact path='/' component={FrontPage} />
      <Route path='/political' component={Political} />
      <Route path='/login' component={Login} />
    </div>
  </BrowserRouter>,
  document.getElementById('root')
);

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