How to use the wouter.useRoute function in wouter

export const Main: React.FunctionComponent = props => {
  const theme = useTheme();
  const user = useSession();
  const [query, setQuery] = React.useState("");
  const [activeTab, setActiveTab] = React.useState(0);
  const { value: followRequests } = useFollowRequests();
  const isLarge = useMedia({ minWidth: "768px" });

  const [, params] = useRoute("/:recipe*");
  const showingRecipe = params.recipe;

  // i'm disabling this for now, since it was running really poorly. unsure
  // whats up here.

  // const transitions = useTransition(false, recipeId => null, {
  //   from: { opacity: 0, transform: "scale(0.95)" },
  //   enter: { opacity: 1, transform: "scale(1)" },
  //   leave: { opacity: 0, transform: "scale(1.1)" },
  //   immediate: !isLarge
  // });

  const renderList = isLarge || !showingRecipe;

  return (

*/
const [location, setLocation] = useLocation();
location; // $ExpectType string

// embedded useLocation hook doesn't accept any arguments
const [] = useLocation({}); // $ExpectError

setLocation(); // $ExpectError
setLocation("/app");
setLocation("/app", true);

useRoute(Symbol()); // $ExpectError
useRoute(); // $ExpectError
useRoute("/");

const [match, params] = useRoute<{ id: string }>("/app/users/:id");
match; // $ExpectType boolean

if (params) {
  params.id; // $ExpectType string
  params.age; // $ExpectError
} else {
  params; // $ExpectType null
}

const [, parameters] = useRoute<{ id: string }>("/app/users/:id");

if (parameters) {
  parameters.id; // $ExpectType string
  parameters.age; // $ExpectError
} else {
  parameters; // $ExpectType null

/*
 * Hooks API
 */
const [location, setLocation] = useLocation();
location; // $ExpectType string

// embedded useLocation hook doesn't accept any arguments
const [] = useLocation({}); // $ExpectError

setLocation(); // $ExpectError
setLocation("/app");
setLocation("/app", true);

useRoute(Symbol()); // $ExpectError
useRoute(); // $ExpectError
useRoute("/");

const [match, params] = useRoute<{ id: string }>("/app/users/:id");
match; // $ExpectType boolean

if (params) {
  params.id; // $ExpectType string
  params.age; // $ExpectError
} else {
  params; // $ExpectType null
}

const [, parameters] = useRoute<{ id: string }>("/app/users/:id");

if (parameters) {
  parameters.id; // $ExpectType string
  parameters.age; // $ExpectError

Hello World!;

/*
 * Hooks API
 */
const [location, setLocation] = useLocation();
location; // $ExpectType string

// embedded useLocation hook doesn't accept any arguments
const [] = useLocation({}); // $ExpectError

setLocation(); // $ExpectError
setLocation("/app");
setLocation("/app", true);

useRoute(Symbol()); // $ExpectError
useRoute(); // $ExpectError
useRoute("/");

const [match, params] = useRoute<{ id: string }>("/app/users/:id");
match; // $ExpectType boolean

if (params) {
  params.id; // $ExpectType string
  params.age; // $ExpectError
} else {
  params; // $ExpectType null
}

const [, parameters] = useRoute<{ id: string }>("/app/users/:id");

if (parameters) {

const UseRouteTest = () => {
    const [match, params] = useRoute("/users/:name");

    if (!match) return null;

    return <div>Welcome, {params &amp;&amp; params.name}!</div>;
};

const PrivateRoute = ({
  component: Component,
  path,
  ...other
}: PrivateRouteProps) => {
  const user = firebase.auth().currentUser;
  const [match, params] = useRoute(path);

  if (!user && params.rest) {
    return ;
  }

  if (!user) {
    return null;
  }

  return ;
};

function Name() {
  const [match, params] = useRoute('/person/:name')
  const name = match ? params.name : names[0]
  return <span class="middle">{name}</span>
}

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",

function Person() {
  const [match, params] = useRoute('/person/:name')
  const index = match ? names.indexOf(params.name) : 0
  const [shapes, setShapes] = useState([])
  useEffect(() => void loaders[index].then(setShapes), [index])

  const transitions = useTransition(shapes, item => item.shape.uuid, {
    from: { position: [-50, 0, 0], rotation: [0, -0.6, 0], opacity: 0 },
    enter: { position: [0, 0, 0], rotation: [0, 0.3, 0], opacity: 1 },
    leave: { position: [50, 0, 0], rotation: [0, 0.6, 0], opacity: 0 },
    order: ['leave', 'enter', 'update'],
    lazy: true,
    trail: 5,
    unique: true,
    reset: true,
  })

  return (

export default () => {
  const [match, params] = useRoute("/websites/:id");
  const [websites, update] = useState([]);
  const [query, setQuery] = useState("");
  const { period } = useContext(appContext);

  useEffect(() => {
    api.websites(...period).then(update);
  }, []);

  const onKeyDown = e => {
    if (e.code === "Escape") {
      setQuery("");
    }
  };

  return (
    <div></div>