my component

 

import React from "react";
//import HeadingRow from './HeadingRow';
import { useState, useEffect } from "react";
import Results from './Results';
 import {useRoutes,
  useParams, Outlet, useLocation, useNavigate } from "react-router-dom";
          
import Card from './Card';



class Services extends React.Component {
         

          constructor(props) {
            super(props);
            console.log(props);
            this. state = {
            cards: [],
            cardsError: "",
            id: props.id
          };
            
          }
        fetchServices = async (id) => {
            const res = await fetch(`http://localhost:5000/cards/${id}`);
            const data = await res.json();

            return data;
          };
        fetchgetServiceseses = async () => {
            const res = await fetch(`http://localhost:5000/cards`);
            const data = await res.json();
            console.log(data);
            return data;
          };
 

        async componentDidMount() {

            const {id} = this.state;
                
                if(id){

                    const data_card = await this.fetchServices(id);
                    const cards = [data_card] ;
                    this.setState({cards });
                    console.log(id);
                    console.log(cards);

                }else{

                        const cards = await this.fetchgetServiceseses();
                  this.setState({ cards });
                }

        }
        async componentDidUpdate() {

                const {id} = this.state;
                    
                    console.log(id);
                     
                    /*
                if(id){

                    const data_card = await this.fetchServices(id);
                    const cards = [data_card] ;
                    this.setState({cards });
                    console.log(id);
                    console.log(cards);

                }else{

                        const cards = await this.fetchgetServiceseses();
                  this.setState({ cards });
                }
                */
        }

        render() {  

             /*const forms_result =  this.setFormsResults();
              console.log(forms_result);*/
             const { cards } = this.state;
                console.log(cards);
                    console.log(cards.length);
            return (<div className="container px-4 px-lg-5 my-5">
                  
                 
             {cards.length > 0 ? (
                <div className="row gx-4 gx-lg-5   ">
                    {cards.map((card, key) => <Card name={card.name}  id={card.id} key1={key} key={key}  link={card.link} sort={card.sort} text={card.text} linkAlias={card.linkAlias} />)}
                </div>
              ) : (
                "Emry results"
              )}

              <Outlet />

            </div>);
             };

    };


export default Services;  
export const ServicesFunk = props => {
  const {id} = useParams();
  console.log(id);
const location = useLocation();
  const navigate = useNavigate();

  const [state] = useState(location.state || {});  

  useEffect(() => {
    navigate(".", { replace: true });  
  }, [navigate]);

  `return <Services id={id} navigate={navigate} {...props} />;`


}  

my app use route

const App = () => (
    
          <Routes>
            


               <Route
                path="/"
                exact 
                element={    <>
                     <TopMenuBlock />
                   <PageContent />
                   <Footer />
                    </>   }
              /> 
              <Route
              path="/form-result"
              exact
               element={    <>
                 <TopMenuBlock /> 
                 <FormResults />
                  <Footer />
                </>   }
            /> 
            <Route
              path="/about/"
              exact
               element={    <>
                 <TopMenuBlock /> 
                 <About />
                  <Footer />
                </>   }
            /> 
            
            <Route
              path="/contact/"
              exact
               element={    <>
                 <TopMenuBlock /> 
                 <Contact />
                  <Footer />
                </>   }
            /> 
            <Route
              path="/services/:id?"
              
               element={    <>
                  <TopMenuBlock /> 
                
                  <ServicesFunk />
                  <Footer />
                </>   }
            > 
           
          </Route>


      </Routes>
   
);

export default App;

when I go to pages

http://localhost:3000/services/1/ и http://localhost:3000/services/2/
the page remains the same, kod

return <Services id={id} navigate={navigate} {...props} />;
does not give a result and is not called. I get the answer here

const {id} = useParams(); console.log(id);

but not here
`async componentDidUpdate() {

            const {id} = this.state;
                
                console.log(id);`

id – undefined

I tried to find an answer on stackoverflow and other sites, no result