how can i fix use location error in my react app? - reactjs

Question

import styled from "styled-components";
import Navbar from "../componant/Navbar";
import Announcement from "../componant/Announcement";
import Products from "../componant/Products";
import Newsletter from "../componant/Newsletter";
import Footer from "../componant/Footer";
import { mobile } from "../responsive";
import { useLocation } from "react-router";
import { useState } from "react";
const Container = styled.div``;
const Title = styled.h1`
margin: 20px;
`;
const FilterContainer = styled.div`
display: flex;
justify-content: space-between;
`;
const Filter = styled.div`
margin: 20px;
${mobile({ width: "0px 20px", display: "flex", flexDirection: "column" })}
`;
const FilterText = styled.span`
font-size: 20px;
font-weight: 600;
margin-right: 20px;
${mobile({ marginRight: "0px" })}
`;
const Select = styled.select`
padding: 10px;
margin-right: 20px;
${mobile({ margin: "10px 0px" })}
`;
const Option = styled.option``;
const ProductList = () => {
const location = useLocation();
const cat = location.pathname.split("/")[2];
const [filters, setFilters] = useState({});
const [sort, setSort] = useState("newest");
const handleFilters = (e) => {
const value = e.target.value;
setFilters({ ...filters, [e.target.name]: value, });
};
return (
{cat} Filter Products: Color white black red blue yellow green Size XS S M L XL Sort Products:
<Select onChange={(e) => setSort(e.target.value)}> Newest Price (asc) Price (desc)
);
};
export default ProductList;

Answer 1

The error useLocation() may be used only in the context of a <Router> component. is caused by an invariant violation. The error message is clear enough, you've not rendered the ProductList component using the useLocation hook within a routing context provided by a Router.
This is react-router-dom version 6
useLocation
export function useLocation(): Location {
invariant(
useInRouterContext(),
// TODO: This error is probably because they somehow have 2 versions of the
// router loaded. We can help them understand how to avoid that.
`useLocation() may be used only in the context of a <Router> component.`
);
return React.useContext(LocationContext).location;
}
You should have a single router wrapping your App component to provide a routing context to the entire app, which would including this ProductList component.
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
Based on some comments of yours from the other answer it appears you are mixing up the RRDv5 and RRDv6 components. V6 has no Switch component, it was replaced by a Routes component.
Check the installed version of react-router and react-router-dom:
npm run list react-router react-router-dom
If you have v5 installed, follow the v5 docs, otherwise if you've v6 installed, see the v6 docs. The upgrading from v5 migration guide will detail the differences between the two versions.

Answer 2

Wrap your app in Routes component.
import React from "react";
import {
BrowserRouter as Router,
Routes,
} from "react-router-dom";
const AppWrapper = () => {
return (
<Router>
<Routes>
<App />
</Routes>
</Router>
);
};
export default AppWrapper;