How to use the wouter.useLocation function in wouter

export default function App() {
    const [location] = useLocation();
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        
            <header>
                
            </header>
            <main>
                <p>Current location: {location}</p>
                }&gt;
                    </main>

export function RecipeListItem({ recipe, id, highlight }: RecipeListItemProps) {
  const theme = useTheme();
  const { src, error } = useFirebaseImage("thumb-sm@", recipe.image);
  const href = `/${id}`;
  const [isActive] = useRoute(href);
  const [, setLocation] = useLocation();

  return (
     {
        e.preventDefault();
        setLocation(href);
      }}
      aria-current={isActive}
      href={`/${id}`}
      css={{
        paddingTop: 0,
        paddingBottom: 0,
        height: "56px",
        alignItems: "center",
        display: "flex",

export function NavigationBar() {
    const [location, setLocation] = useLocation();

    const goto = useCallback(
        (newTabId: TabId) => {
            setLocation(String(newTabId));
        },
        [setLocation],
    );

    const searchSpinner = ;
    const navBarMenu = (
        <menu>
            <menuitem>
            <menuitem>
            <menuitem>
            
            <menuitem>} text="Settings..." /&gt;</menuitem></menuitem></menuitem></menuitem></menu>