Links in Navbar React Class component does not work, please help me!pleas

I am working on a project where I must use only React class components. The problem is that the links from navbar are not working: not rendering the components.
This is Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {  ApolloClient,  InMemoryCache,  
ApolloProvider,} from "@apollo/client";
import { HashRouter } from 'react-router-dom';

export const client = new ApolloClient({
  uri: ' http://localhost:4000/',
  cache: new InMemoryCache()
});

ReactDOM.render(
  <React.StrictMode>
    <HashRouter >
    <ApolloProvider client={client}>      
    <App />    
    </ApolloProvider>
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

This is App.js:

import React, { Component } from 'react'
import './App.css';
import { Switch, Route} from 'react-router-dom'
import Navbar from './Components/Navbar';
import Clothes from './Pages/Clothes';
import Tech from './Pages/Tech';
import { client } from './index';
import {GET_CURRENCY_QUERY} from './GraphQl/Queries'

class App extends Component {
  state={
    currencies: [],
    finalCur: []
  }
  componentDidMount = async ()=>{
    const response = await client.query({
      query:GET_CURRENCY_QUERY
    })
    this.setState({
      currencies:response.data.currencies
    })    
  }
  
  render() {
      return (   
            <div className="App">        
                 <Navbar currencies={this.state.currencies}/>          
                 <Switch>            
                      <Route exact path="/clothes" component={Clothes} />
                     <Route exact path="/tech" component={Tech} />;              
                 </Switch>      
      </div>           
    );
  }
}
export default App;

This is Navbar.jsx :

import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import styled from 'styled-components'

const StyledLink = styled(Link)`
    text-decoration: none;
    color: black;  
        &:focus, &:active {
        text-decoration: none;
        color: rgba(84,229,130,255);
        border-bottom: 1px solid rgba(84,229,130,255);
    }
`;

class Navbar extends Component {          
    render() {                          
        return (
            <nav>
                <div className="nav-links">
                <ul className="navbar">
                    <li>
                        <StyledLink to="/clothes" replace>Clothes</StyledLink>
                    </li>
                    <li>
                        <StyledLink to="/tech" replace>Tech</StyledLink>
                    </li>
                </ul>
                </div>
                 <div className="cart-currency">
                    <select>
                        {this.props.currencies && 
                        this.props.currencies.map(currency=>
                        <option key={currency}
                        value={currency}>
                            {currency} 
                            </option>)}                                       
                     </select>
                </div>
            </nav>
        )
    }
}
export default Navbar

And this is one of the pages - Clothes.jsx:

import React, { Component } from 'react'
import { client } from '../index'
import { GET_CATEGORY_QUERY } from '../GraphQl/Queries'
import { CLOTHES_CATEGORY_VAR } from '../GraphQl/Variables'

class Clothes extends Component {
    state={
        clothesArt: []
    }
    componentDidMount = async ()=>{
        const response = await client.query({
            query: GET_CATEGORY_QUERY,
            variables: CLOTHES_CATEGORY_VAR
        })
        this.setState({
            clothesArt:response.data.category.products
        })
    }    
    render() {
        console.log(this.state.clothesArt)
        return (
            <div>
                <h1>Clothes</h1>
            </div>
        )
    }
}

export default Clothes

For me this is the first time when I am using class components and I don’t understand what is wrong :thinking:
Thank you very much!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.