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的{{1}}。

如果您仅为浏览器开发应用程序，则只能安装react-router-dom：

react-router-dom

我不确定那里发生了什么，因此您可以尝试以下方法：

npm install react-router-dom

或者，您可能已经破坏了npm_modules？运行以下命令：

npm install react-router react-router-dom

等等！从您的错误看来，您没有正确运行项目。它应该显示您来自服务器的文件路径。但这是否显示您来自系统的文件路径？运行以下命令以启动项目：

npm install

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

npm start

Answer 3

我刚刚在App.js文件中添加了以下行，它可以正常工作！

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

这也是

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

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

3 个答案: