Question

我正在处理我刚刚开始的两个新项目中的一个问题，并且已经按照在生产中将其用于另一个项目的方式进行了配置，并且由于某种原因，我似乎在这里找不到错误。

我已使用create-react-app使用最新版本的npx create-react-app myapp开始了我的react项目，由于某种原因，我的应用程序无法使用react-router-dom在本地编译。

这是我在package.json中的依赖项：

"dependencies": {
    "react": "^16.8.6",
    "react-bootstrap": "^0.32.4",
    "react-dom": "^16.8.6",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.0.1"

我有一个index.js文件，其中我将<App />组件包裹在<Router />所导入的BrowserRouter组件中，该组件由react-router-dom指定

这是我的index.js文件的内容：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

从那里我的<App />组件实现了一个自定义<Routes />组件，该组件使用Route中的Switch和react-router-dom处理我的应用程序的路由需求。

以下是我的<App />组件的内容：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import Routes from "./Routes.js";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapsOnSelect>
          ...... misc navbar code
        </Navbar>
        <Routes />
      </div>
      );
  }
}

export default App;

这是我的Routes.js文件的外观，以及它如何使用Route中的Switch和react-router-dom：

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";

export default () => <Switch>
                       <Route path="/" exact component={ Home } />
                     </Switch>;

这是我要在本地投放的{ Home }组件：

import React, { Component } from "react";
import "./Home.css";

export default class Home extends Component {
  render() {
    return (
      <div className="Home">
        <div className="LandingPage">
          ... random html code
        </div>
      </div>
      );
  }
}

最后是错误：

您认为这里可能是什么问题？？？谢谢！

更新：添加文件层次结构

Answer 1

啊！文件层次结构也是如此。 Routes.js在src中，因此它在src/components中查找，而该对象不存在。

相反，使其变为import Home from "../containers/Home";，或重组项目以使containers位于src内部。

Answer 2

您的route.js应该是

class Quote{

  deleteQuote(callback){
    $('tr#'+callback.quoteid).hide('slow', function(){
        $(this).remove();
    });
}}

console.log(Quote.prototype.hasOwnProperty('deleteQuote'));

您必须进入一个目录才能到达容器所在的位置，设置方式将在src中查找容器

反应编译失败。找不到模块：无法解决，如何使用react-router进行编译？

2 个答案: