反应路由器不显示jsx

Posted 2023-02-22

【中文标题】反应路由器不显示jsx

【英文标题】：React-router not displaying 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 它的工作原理。

【参考方案1】：

您的错误在于导入语句

变化：

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

收件人：

import ProductListing from './containers/ProductListing';

【讨论】：

简单的电脑重启确实有效！无论如何感谢您的帮助

太荒谬了 :D，下次你可以重新加载窗口