React TypeScript: Correct type for useLocation() from react-router-dom

Question

I'm struggling to find the right type for this situation. This is a simplified version of redirecting after login. The following produces a compiler error:

Property 'from' does not exist on type '{} | { from: { pathname: string; }; }'.

Adding as any to the use of location.state fixes the compiler error but it's ugly and the linter complains.

import React from "react";
import { useLocation } from "react-router-dom";

const AuthLayer: React.FC = (props) => {
  const location = useLocation();

  const { from } = location.state || { from: { pathname: "/" } };

  return <p></p>;
};

export default AuthLayer;

Answer 1

You can create a particular type or interface to describe your location state and then use it when calling a useLocation hook:

import React from "react";
import { useLocation } from "react-router-dom";

interface LocationState {
  from: {
    pathname: string;
  };
}

const AuthLayer: React.FC = (props) => {
  const location = useLocation<LocationState>();

  const { from } = location.state || { from: { pathname: "/" } };

  return <p></p>;
};

export default AuthLayer;