I've been following along the following tutorial building an Amazon clone at the below link:
https://www.youtube.com/watch?v=RDV3Z1KCBvo
I've been able to successfully follow along for the first 90 minutes or so but now I'm running into a problem with functionality.
The first thing I ran into that I had to change was to uninstall react-router-dom and install react-router-dom@5.2.0 in order to get following code to work:
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
The regular react-router-dom package no longer supported Switch so I uninstalled that package and installed the 5.2.0 package.
With that said, everything was working again until I ran into the following code:
import React from 'react';
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';
import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
import { Link } from 'react-router-dom';
function Header() {
return (
<div className='header'>
<Link to='/'>
<img className='header__logo' src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"/>
</Link>
<div className='header__search'>
<input className='header__searchInput' type='text' />
<SearchIcon className="header__searchIcon" />
</div>
<div className='header__nav'>
<div className='header__option'>
<span className='header__optionLineOne'>Hello Guest</span>
<span className='header__optionLineTwo'>Sign In</span>
</div>
<div className='header__option'>
<span className='header__optionLineOne'>Returns</span>
<span className='header__optionLineTwo'>Orders</span>
</div>
<div className='header__option'>
<span className='header__optionLineOne'>Your</span>
<span className='header__optionLineTwo'>Prime</span>
</div>
<Link to='/checkout'>
<div className='header__optionBasket'>
<ShoppingBasketIcon />
<span className="header__optionBasket header__basketCount">0</span>
</div>
</Link>
</div>
</div>
)
}
export default Header
So here is the problem I'm having:
When I click the links for the logo or the shopping cart logos, my mouse will hover over them because it recognizes them both as links, however when I click them, the URL changes to the expected site, however the redirect doesn't take place. I have to go into the address bar and hit enter manually in order for the page to change.
I'm new to React but I've made sure all my code is exactly as in the tutorial but it's not working properly.
Someone asked for my router code -- here it is:
import React from "react";
import "./App.css";
import Header from "./Header";
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Checkout from "./Checkout";
function App() {
return (
// BEM
<Router>
<div className="app">
<Header />
<Switch>
<Route path="/checkout">
<Checkout />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;
