javascript — Reaction-router-dom: Неверный вызов ловушки, Хуки могут быть вызваны только внутри тела компонента функции

Reaction-router-dom: Неверный вызов ловушки, Хуки могут быть вызваны только внутри тела компонента функции

Я пытаюсь вложить маршрут: у меня есть каталог продуктов в компоненте Каталога , который совпадает с URL «backoffice / catalog» .

Я хочу направить к компоненту Edition, если URL-адрес совпадает с «backoffice / catalog / edit» , но мне нужно, чтобы компонент Edition был дочерним элементом Catalog для совместного использования реквизитов.

Я действительно не понимаю, почему вложенный маршрут не работает, пожалуйста, спасите меня! И не стесняйтесь сказать мне, если что-то не так с моим приложением, я хорошо знаю Javascript, но я начинаю с React: D

Вот мой компонент приложения:

 import React from "react"; import { Route, Switch } from "react-router-dom"; import { Home } from "./components/Static/Home.js"; import { Dashboard } from "./components/Backoffice/Dashboard.js"; import { Catalog } from "./components/Backoffice/catalog/Catalog.js"; import { Login } from "./components/Login/Login.js"; import { Signup } from "./components/Signup/Signup.js"; import { PrivateRoute } from "./components/PrivateRoute.js"; import "./scss/App.scss"; import {Header} from "./components/Structure/Header"; import {BOHeader} from "./components/Structure/Backoffice/Header"; import {List} from "./components/Listing/List"; function App() { return ( {amp}lt;div className="App"{amp}gt; {amp}lt;div className="App-content"{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route path='/backoffice' component={BOHeader} /{amp}gt; {amp}lt;Route path='/' component={Header} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path='/' component={Home} /{amp}gt; {amp}lt;Route exact path='/login' component={Login} /{amp}gt; {amp}lt;Route exact path='/signup' component={Signup} /{amp}gt; {amp}lt;Route path='/listing' component={List}/{amp}gt; {amp}lt;PrivateRoute exact path='/backoffice' component={Dashboard}/{amp}gt; {amp}lt;PrivateRoute exact path='/backoffice/catalog' component={Catalog}/{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } export default App; 

Вот мой компонент Каталог (маршрут сделан в методе рендеринга:

 import React from 'react'; import Data from '../../../Utils/Data'; import {Product} from './Product'; import {Edition} from './Edition'; import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch, useParams } from "react-router-dom"; export class Catalog extends React.Component { state = { title: '', products: [], editionProduct: null }; obtainProducts = () ={amp}gt; { Data.products.obtain() .then(products ={amp}gt; {this.setState({products: products});}) }; editProductHandler = product ={amp}gt; { this.setState({editionProduct: product}); }; saveProductHandler = product ={amp}gt; { Data.products.save(product).then(() ={amp}gt; { this.state.products.map(item ={amp}gt; { item = item._id === product._id ? product : item; return item; }) }); }; deleteProductHandler = event ={amp}gt; { const productId = event.target.closest('.product-actions').dataset.productid; let products = this.state.products.filter(product ={amp}gt; { return product._id !== productId; }); this.setState({products: products}, () ={amp}gt; { Data.products.remove(productId); }); }; displayProducts = () ={amp}gt; { return this.state.products.map(product ={amp}gt; { return ( {amp}lt;li key={product._id} className='catalog-item'{amp}gt; {amp}lt;Product deleteProductHandler={this.deleteProductHandler} editProductHandler={this.editProductHandler} data={product} /{amp}gt; {amp}lt;/li{amp}gt; ) }); }; componentWillMount() { this.obtainProducts(); } render() { const Products = this.displayProducts(); let { path, url } = useRouteMatch(); return ( {amp}lt;div className={this.state.editionProduct ? 'catalog edit' : 'catalog'}{amp}gt; {amp}lt;h1{amp}gt;Catalog{amp}lt;/h1{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path={path}{amp}gt; {amp}lt;ul className='catalog-list'{amp}gt;{Products}{amp}lt;/ul{amp}gt; {amp}lt;/Route{amp}gt; {amp}lt;Route path={`${path}/edit`}{amp}gt; {amp}lt;Edition saveProductHandler={this.saveProductHandler} product={this.state.editionProduct} /{amp}gt; {amp}lt;/Route{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/div{amp}gt; ); } } 

Есть идеи ?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector