时间戳

首页 > 解决方案 > 屏幕页面没有显示来自 React 的任何内容

javascript - 屏幕页面没有显示来自 React 的任何内容

问题描述

所以我正在做这个项目，尽管我里面有代码，但我的 productScreen.js 是空的。

我正在关注其中一个教程，但不确定我做错了什么。在此处输入图像描述

我的 productScreen.js 代码

import React from 'react'
import { Link } from 'react-router-bootstrap'
import { Row, Col, Image, ListGroup, Button, Card  } from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../products';
function ProductScreen({match}) {
    const product = products.find((p) => p._id == match.params.id)
    console.log('wfw')
    return (

        <div>
            
            <Link to='/' className = 'btn btn-light my-3'> Go Back</Link>
        </div>
    )
}

export default ProductScreen

我调用 ProductScreen 的 App.js



import {Container} from 'react-bootstrap'
import Header from './components/Header'
import Footer from './components/Footer'
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import { BrowserRouter as Router, Route } from "react-router-dom";

/*import HomeScreen from './screens/HomeScreen' */

function App() {
  return (
    <Router>
    <div>
    <Header/>
    <main className='py-3'>
      <Container>
        <Route path="/" exact component={HomeScreen} />
        <Route path='/product/:id' component={ProductScreen} />
      </Container>
    </main>
    <Footer/>
    </div>
    </Router>
  );
}

export default App;

我尝试使用 console.log() 并且如果打印任何内容但不显示任何内容，但它不会给我错误，即找不到 ProductScreen.js 文件。因此，既然他们能够找到 ProductScreen.js，我猜 ProductScreen.js 中的代码是问题所在？

有什么建议可以调试这个问题？

https://github.com/williamkwon97/CRT-Commerce

标签： javascriptreactjs

解决方案

我看了一下github上的项目。
问题是Product.js文件中的拼写错误：路由器响应时
重定向到（见最后一个字母）。/products/product

为了避免端点的简单错误，使用成本是一个不错的选择。
export const ENPDOINT_PRODUCT = 'product'
接着
import { ENDPOINT_PRODUCT } from './costants'

其次，在 productScreen.js 文件中，组件“react-router-bootstrap”导出 LinkContainer，因此代码应如下所示：

...
import { LinkContainer } from 'react-router-bootstrap'
...

// inside return function
<LinkContainer to="/" className = "btn btn-light my-3">
    <Button>Go Back</Button>
</LinkContainer>
...

干杯

推荐阅读