Я создал страницу в своем приложении для отображения рядов карточек с изображением только заголовка и изображения. Но по какой-то причине контент не показывается. Ошибок нет и, насколько я вижу, сейчас проблемы с синтаксисом. Я не понимаю, почему мой компонент создает пустую страницу.
Я использовал аналогичный метод для других страниц, и они работали, поэтому я не вижу, где я иду не так, как надо. Может ли кто-нибудь помочь мне понять, почему мой компонент не отображается на этой странице? Я действительно ценю это.
Ниже приведен мой код, а также изображение того, как я настраивал свои файлы.
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;