Компонент, не отображающий содержимое в приложении React - PullRequest
0 голосов
/ 10 июля 2019

Я создал страницу в своем приложении для отображения рядов карточек с изображением только заголовка и изображения. Но по какой-то причине контент не показывается. Ошибок нет и, насколько я вижу, сейчас проблемы с синтаксисом. Я не понимаю, почему мой компонент создает пустую страницу.

Я использовал аналогичный метод для других страниц, и они работали, поэтому я не вижу, где я иду не так, как надо. Может ли кто-нибудь помочь мне понять, почему мой компонент не отображается на этой странице? Я действительно ценю это.

Ниже приведен мой код, а также изображение того, как я настраивал свои файлы.

File Setup

App.js

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Navbar from './components/Navbar/navbar.js';
import Footer from './components/Footer/footer.js';
import Home from './pages/Home/home.js';
import Login from './pages/Login/login.js';
import Languages from './pages/Languages/languages.js';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar/>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/languages" component={Languages}/>
          </Switch>
      </BrowserRouter>
      <Footer />
    </div>
  );
}

export default App;

Languages.js

import React, { Component } from 'react';
import LangCard from "../../components/LangCard/langcard.js";
import './languages.css';

class Languages extends Component {
    render() {
        return (
            <div className="row">
                <LangCard />
            </div>
        )
    }
}

export default Languages;

LangCard.js

import React from 'react';
import Card from 'react-bootstrap/Card';
import './langcard.css';

const LangCard = () => {
    return (
        <div className="container">
            <div className="row" >
                <Card id="lang-card">
                    <div className="card-img"></div>
                        <Card.Body>
                            <Card.Title>Italian</Card.Title>
                        </Card.Body>
                </Card>
            </div>
        </div>
    )
}

export default LangCard;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...