如何解决 Reactjs 中的“找不到模块”？

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

尝试通过在 Shell/CMD 中运行以下命令来安装 router-dom 包

npm install react-router-dom --save

Answer 2

更新：找到真正的罪魁祸首：

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

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

<Router>
  <Landing />
</Router>

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

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

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

npm install react-router

它将安装react-router，其中包含react-router-dom。

如果您只为浏览器开发应用，那么您只能安装 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 3

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

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

还有这个

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