如何在 Reactjs 中解析 "module not found"？

Question

当我编译我的应用程序时，它显示错误：

./src/Components/Landing.js
Module not found: Can't resolve 'react-router-dom' in 'C:\Users\gaura\Documents\REACT\love-writing\src\Components'

以下是 App.js 的代码，我创建了一个名为 Landing.js 的组件，它是一个功能组件。

**

App.js

**

import React, {Component} from 'react';
//import logo from './logo.svg';
import './App.css';
import Landing from './Components/Landing';

class App extends Component {
  render() {
    return(
      <Landing/>
    );
  }
}
export default App;

**

Landing.js

**

import React from 'react';
import { Link } from 'react-router-dom';

const Landing = () => {
    const Accesstoken = window.localStorage.token;
    return(
        <div className = "App">
            <div className = "intro-message">
                <h1>Love Writing</h1>
                <br>
                </br>
                <h2>Makes your writing easier and better</h2>
                <hr className = "intro-divider" />
            </div>
            <div className="list-inline intro-social-buttons">
        <div className="list-inline-item">
          {!Accesstoken ? (
            <div>
              <Link to="/login">
                <button className="network-name">LOG IN</button>
              </Link>
              <Link to="/register">
                <button className="network-name">SIGN UP</button>
              </Link>
            </div>
          ) : (
            <div>
              <Link to="/addcategory">
                <button className="network-name">ADD GENRES</button>
              </Link>

              <Link to="/categories">
                <button className="network-name">VIEW GENRES</button>
              </Link>
            </div>
            )}

        </div>
      </div>
      <div className="copyright">
        <p>Copyright &copy; Love_Writing_Neha_Chaudhary 2019. All Rights Reserved</p>
      </div>

    </div>
  );
};

export default Landing;

**

项目结构

** https://i.stack.imgur.com/lXvMp.jpg

我已经在 App.js 中正确导入了 Landing.js。我不明白为什么会出现此错误。

Answer 1

更新：找到真凶：

您没有在路由器内部使用 <Link />。您应该将 <Landing /> 组件包装在路由器中：

import { BrowserRouter as Router } from 'react-router-dom'

<Router>
  <Landing />
</Router>

不允许在 Router 范围之外使用 <Link /> 组件。

您可以跳过阅读以下部分。

您的 node_modules 中似乎没有安装该软件包。所以，运行这个命令：

npm install react-router

它将安装包含 react-router-dom 的 react-router。

如果您只为浏览器开发应用程序，那么您只能安装 react-router-dom:

npm install react-router-dom

我不太确定那里发生了什么，所以你可以试试这个：

npm install react-router react-router-dom

或者，您可能已经妥协了 npm_modules？运行这个命令：

npm install

等等！从您的错误来看，您似乎没有运行正确投影。它应该向您显示服务器的文件路径。但它向您显示系统的文件路径？运行启动项目的命令：

npm start

如果仍然不能帮助您。这是我的最终想法：

rm -rf node_modules # remove all packages
npm cache clean # clear the cache
npm install # install all the packages
npm install --save react-router # if react-router-dom isn't in your package.json
npm start # run the project
# project should be run in localhost:3000 by default.

Answer 2

尝试通过运行安装 router-dom 包 Shell/CMD

npm install react-router-dom --save

Answer 3

我刚刚在 App.js 文件中添加了以下行，它起作用了！！

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

还有这个

class App extends Component {
  render() {
    return(
      <BrowserRouter>
        <Landing/>
      </BrowserRouter>
    );
  }
}

如何在 Reactjs 中解析 "module not found"？

How to resolve "module not found" in Reactjs?

reactjs

web-development-server