React Router 无法解析模块

Question

出现此错误...

编辑routes.js以反映更改

./app/config/routes.js 中的错误 找不到模块：错误：无法解析 /Users/sam/Desktop/battle/app/config 中的模块“react-router” @ ./app/config/routes.js 2:19-43

我已经将 webpack 和react-react-dom-react-router-babel等全部安装到我的npm包中。当我运行 npm start 时，出现上述错误。这是我的 package.json / webpack config / router.js 文件

package.json

{
  "name": "battle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "production": "webpack -p",
    "start": "webpack-dev-server"
  },
  "author": "Sam Schaefer <[email protected]>",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.0",
    "react-dom": "^15.4.0",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-react": "^6.16.0",
    "html-webpack-plugin": "^2.24.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

routes.js

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var Main = require('../components/Main');
var Home = require('../components/Home');

var routes = (
    <Router>
        <Route path='/' component={Main}>
            <Route path='/home' component={Home} />
        </Route>
    </Router>
);

module.exports = routes;

感谢您的帮助。

Answer 1

问题点错误：

./app/config/routes.js 中的错误模块未找到：错误：无法 解析 /Users/sam/Desktop/battle/app/config 中的模块“react-rounter” @ ./app/config/routes.js 2:19-43

在您的 routes.js 文件中：

react-rounter
         ^--- this is probasbly the issue.

那不应该是“react-router”吗？纠正你的routes.js 文件中的拼写错误，你就可以开始了。

Answer 2

我从

react-router

3.x 迁移到 4.x

时遇到了类似的问题

我通过安装 4.x 中添加的两个缺失的依赖项解决了该问题

npm install react-router-dom
npm install react-router-config

请参阅

react-router

变更日志。

Answer 3

错误是：

找不到模块：无法解析“E:\Redux\media-library\src”中的“react-router”。

解决方案是：

在您的目录中运行以下命令。

$ npm install --save React-router-dom

Answer 4

通过安装缺少的依赖项解决了问题：

npm i react-router-dom

npm i react-router-config

npm i --save react-router-dom

Answer 5

首先卸载到达路由器，然后

安装

npm install @reach/router 

导入

import { Router, Link } from "@reach/router"

使用

<Router>
    <Home path="/" />
</Router>

查看官方网站https://reach.tech/router/