反应路由器不显示jsx答案

【问题标题】：React-router not displaying jsx反应路由器不显示jsx
【发布时间】：2021-11-06 22:56:18
【问题描述】：

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

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

【问题讨论】：

您缺少BrowserRouter 的用法，需要在App 内触发提供程序:)
@windmaomao 。我将 BrowserRouteras 导入为路由器
您在日志中看到任何错误吗？我尝试了您的代码的简化版本，它工作正常
@RyanLe 不，完全没有错误
这里是 codesanbox 它的工作原理。

标签： reactjs jsx react-router-dom

【解决方案1】：

您的错误在于导入语句

变化：

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

收件人：

import ProductListing from './containers/ProductListing';

【讨论】：

简单的电脑重启确实有效！无论如何感谢您的帮助
太荒谬了 :D，下次你可以重新加载窗口