Question

我在应用程序中创建了一个页面来显示卡片行，其中仅包含标题和图像。但是，由于某种原因，该内容没有显示。没有错误，据我所知，现在语法有问题。我不明白为什么我的组件生成空白页。

我在其他页面和工作页面上都使用了类似的方法，所以我看不到我要去哪里。有人可以帮我理解为什么我的组件没有出现在此特定页面上吗？我真的很感激。

下面列出的是我的代码，以及有关如何设置文件的图片。

https://gilbertmovingandstorage.com/view.css

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;

组件未在React应用程序中显示内容

0 个答案: