Блог

Главная - Вопросы по программированию - Реагировать-маршрутизатор не отображает jsx

Реагировать-маршрутизатор не отображает jsx

#reactjs #jsx #react-router-dom

Вопрос:

Когда я перейду по корневой ссылке («http://localhost:3000») jsx компонента списка продуктов не отображается, но я вижу консоль.сообщение журнала, записанное в компоненте списка продуктов.

 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

Комментарии:

1. вам не хватает использования BrowserRouter , поставщик должен быть уволен внутри приложения 🙂

2. @windmaomao . Я импортировал браузерные маршрутизаторы в качестве маршрутизатора

3. Видите ли вы какие-либо ошибки в журналах? Я попробовал упрощенную версию вашего кода, и она отлично работает

4. @RyanLe Нет, вообще никаких ошибок

5. Вот кодовое поле, в котором это работает.

Ответ №1:

Ваша ошибка связана с инструкцией импорта

Изменить:

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

Для:

 import ProductListing from './containers/ProductListing';

Комментарии:

1. простая перезагрузка пк сработала! В любом случае спасибо за попытку помочь

2. Это смешно :D, в следующий раз вы можете вместо этого перезагрузить окно

Метки: