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
Thank you very much!