Saya berurusan dengan masalah pada dua proyek baru yang baru saja saya mulai dan saya telah mengonfigurasinya seperti yang saya miliki di proyek lain dalam produksi dan untuk beberapa alasan saya sepertinya tidak dapat menemukan bug di sini.

Saya telah memulai proyek reaksi saya dengan versi terbaru create-react-app menggunakan: npx create-react-app myapp dan untuk beberapa alasan aplikasi saya tidak dikompilasi secara lokal dengan react-router-dom.

Berikut adalah dependensi saya di package.json saya:

"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"

Saya memiliki file index.js tempat saya membungkus komponen <App /> saya di dalam komponen <Router /> yang saya impor dengan BrowserRouter sebagaimana ditentukan dari react-router-dom.

Berikut adalah isi file index.js saya:

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();

Dari sana komponen <App /> saya mengimplementasikan komponen <Routes /> khusus yang menggunakan Route dan Switch dari react-router-dom untuk menangani kebutuhan perutean aplikasi saya.

Berikut adalah isi dari komponen <App /> saya:

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;

Seperti inilah tampilan file Routes.js saya dan cara menggunakan Route dan Switch dari 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>;

Berikut adalah komponen { Home } yang saya coba sajikan secara lokal:

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>
      );
  }
}

Dan akhirnya inilah kesalahannya:

React Fails to Compile

Menurut Anda apa yang bisa menjadi masalah di sini??? Terima kasih !

PERBARUI: Menambahkan Hirarki File

Project Hierarchy

-1
lopezdp 29 Mei 2019, 21:09

2 jawaban

Jawaban Terbaik

Ah! Begitu pula dengan hierarki file. Routes.js ada di src, jadi cari di src/components, yang tidak ada.

Sebagai gantinya, buat import Home from "../containers/Home";, atau restrukturisasi proyek sehingga containers ada di dalam src.

2
Calvin Godfrey 29 Mei 2019, 18:31

Routes.js Anda seharusnya

import Home from "../containers/Home";

Anda harus naik satu direktori untuk sampai ke tempat kontainer berada, cara Anda mengaturnya mencari kontainer di dalamnya src

1
Nader-a 29 Mei 2019, 18:33