React-router not displaying jsx

Question

当我转到根链接("http://localhost:3000")时，没有显示ProductListing组件的jsx，但我可以看到console.log消息，该消息写入ProductListing组件。

import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Header from './containers/Header';
import ProductListing from './containers/ProductListing.js';
import ProductDetail from './containers/ProductDetail';
function App() {
return (
<div className="App">
<Router>
<Header/>
<Switch>
<Route path="/" exact component={ProductListing}/>
<Route path="/product/:productId" component={ProductDetail}/>
<Route>404 Not Found</Route>
</Switch>
</Router>
</div>
);
}
export default App;
import React from 'react'
import { useSelector } from 'react-redux'
const ProductListing = () => {
const products = useSelector(state => state)
console.log(products)
return (
<div>
<h1>ProductListing</h1>
</div>
)
}
export default ProductListing

Answer 1

您的错误位于import语句

改变:

import ProductListing from './containers/ProductListing.js';

:

import ProductListing from './containers/ProductListing';