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

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;

Error: useLocation() may be used only in the context of a <Router> component. invariant C:/Users/hp/packages/react-router/index.tsx:19 16 | export type { Location, Path, To, NavigationType }; 17 | 18 | function invariant(cond: any, message: string): asserts cond { > 19 | if (!cond) throw new Error(message); 20 | } 21 | 22 | function warning(cond: any, message: string): void { View compiled useLocation C:/Users/hp/packages/react-router/index.tsx:397 394 | * @see reactrouter.com/docs/en/v6/api#uselocation 395 | — Gaeth Omari
Error: useLocation() may be used only in the context of a <Router> component. invariant C:/Users/hp/packages/react-router/index.tsx:19 16 | export type { Location, Path, To, NavigationType }; 17 | 18 | function invariant(cond: any, message: string): asserts cond { > 19 | if (!cond) throw new Error(message); 20 | } — Gaeth Omari

Georgy Georgy · Accepted Answer · 2021-11-11T18:48:13

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;

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

1 Answers