I’m having a successful deployment
JavaScript
x
11
11
1
useLocation
2
/Users/hvaandres/Desktop/Development/Ecommerce/modules/hooks.js:29
3
26 | );
4
27 | }
5
28 |
6
> 29 | return useContext(Context).location;
7
30 | }
8
31 |
9
32 | export function useParams() {
10
11
Success:
JavaScript
1
11
11
1
Compiled successfully!
2
3
You can now view ecommerce-store in the browser.
4
5
Local: http://localhost:3000
6
On Your Network: http://192.168.1.194:3000
7
8
Note that the development build is not optimized.
9
To create a production build, use npm run build.
10
11
The issue says that is coming from a hook.js file which I don’t see this file in my repo:
If I look at the chrome tools, this is the reference from my issue
JavaScript
1
57
57
1
import React from "react";
2
import invariant from "tiny-invariant";
3
4
import Context from "./RouterContext.js";
5
import HistoryContext from "./HistoryContext.js";
6
import matchPath from "./matchPath.js";
7
8
const useContext = React.useContext;
9
10
export function useHistory() {
11
if (__DEV__) {
12
invariant(
13
typeof useContext === "function",
14
"You must use React >= 16.8 in order to use useHistory()"
15
);
16
}
17
18
return useContext(HistoryContext);
19
}
20
21
export function useLocation() {
22
if (__DEV__) {
23
invariant(
24
typeof useContext === "function",
25
"You must use React >= 16.8 in order to use useLocation()"
26
);
27
}
28
29
return useContext(Context).location;
30
}
31
32
export function useParams() {
33
if (__DEV__) {
34
invariant(
35
typeof useContext === "function",
36
"You must use React >= 16.8 in order to use useParams()"
37
);
38
}
39
40
const match = useContext(Context).match;
41
return match ? match.params : {};
42
}
43
44
export function useRouteMatch(path) {
45
if (__DEV__) {
46
invariant(
47
typeof useContext === "function",
48
"You must use React >= 16.8 in order to use useRouteMatch()"
49
);
50
}
51
52
const location = useLocation();
53
const match = useContext(Context).match;
54
55
return path ? matchPath(location.pathname, path) : match;
56
}
57
If I trace the problem it seems that is located inside of my NavBar.js which is invoking useLocation():
JavaScript
1
59
59
1
import React, { useState } from 'react';
2
import { AppBar, Toolbar, IconButton, Badge, MenuItem, Menu, Typography } from '@material-ui/core';
3
import { ShoppingCart } from '@material-ui/icons';
4
import { Link, useLocation } from 'react-router-dom';
5
6
import logo from '../../assets/logo.png';
7
import useStyles from './styles';
8
9
const PrimarySearchAppBar = ({ totalItems }) => {
10
const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = useState(null);
11
const classes = useStyles();
12
const location = useLocation();
13
14
const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
15
16
const handleMobileMenuClose = () => setMobileMoreAnchorEl(null);
17
18
const mobileMenuId = 'primary-search-account-menu-mobile';
19
20
const renderMobileMenu = (
21
<Menu anchorEl={mobileMoreAnchorEl} anchorOrigin={{ vertical: 'top', horizontal: 'right' }} id={mobileMenuId} keepMounted transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={isMobileMenuOpen} onClose={handleMobileMenuClose}>
22
<MenuItem>
23
<IconButton component={Link} to="/cart" aria-label="Show cart items" color="inherit">
24
<Badge badgeContent={totalItems} color="secondary">
25
<ShoppingCart />
26
</Badge>
27
</IconButton>
28
<p>Cart</p>
29
</MenuItem>
30
</Menu>
31
);
32
33
return (
34
<>
35
<AppBar position="fixed" className={classes.appBar} color="inherit">
36
<Toolbar>
37
<Typography component={Link} to="/" variant="h6" className={classes.title} color="inherit">
38
<img src={logo} alt="commerce.js" height="25px" className={classes.image} /> Commerce.js
39
</Typography>
40
<div className={classes.grow} />
41
{location.pathname === '/' && (
42
<div className={classes.button}>
43
<IconButton component={Link} to="/cart" aria-label="Show cart items" color="inherit">
44
<Badge badgeContent={totalItems} color="secondary">
45
<ShoppingCart />
46
</Badge>
47
</IconButton>
48
</div>
49
)}
50
</Toolbar>
51
</AppBar>
52
{renderMobileMenu}
53
</>
54
);
55
};
56
57
export default PrimarySearchAppBar;
58
59
The problem is that I don’t know what I’m doing wrong. This is my repo, could someone help me to see what is the issue or where I’m making a mistake?
Advertisement
Answer
JavaScript
1
10
10
1
in App.js
2
import { BrowserRouter as Router} from "react-router-dom";
3
then wrap your components inside Router
4
5
<Router>
6
<Navbar totalItems={cart.total_items}/>
7
{/* <Products products={products} onAddToCart={handleAddToCart}/> */}
8
<Cart cart={cart}/>
9
</Router>
10
This will solve your problem for sure, as your component is triying to use location from useLocation(), for that you have to wrap your component inside a Router coming from router-dom