-
-
Notifications
You must be signed in to change notification settings - Fork 10.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: Fix types related to history State #8601
Conversation
Hi @bhbs, Welcome, and thank you for contributing to React Router! Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once. You may review the CLA and sign it by adding your name to contributors.yml. Once the CLA is signed, the If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected]. Thanks! - The Remix team |
Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳 |
```tsx | ||
declare function useLocation(): Location; | ||
|
||
interface Location<S extends State = object | null> | ||
extends Path { | ||
state: S; | ||
interface Location extends Path { | ||
state: unknown; | ||
key: Key; | ||
} | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
children?: React.ReactNode; | ||
onPress?(event: GestureResponderEvent): void; | ||
replace?: boolean; | ||
state?: State; | ||
state?: any; | ||
to: To; | ||
} | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
react-router/packages/react-router-dom/index.tsx
Lines 240 to 246 in 1d2c24e
export interface LinkProps | |
extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> { | |
reloadDocument?: boolean; | |
replace?: boolean; | |
state?: any; | |
to: To; | |
} |
interface NavigateProps { | ||
to: To; | ||
replace?: boolean; | ||
state?: State; | ||
state?: any; | ||
} | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
react-router/packages/react-router/index.tsx
Lines 145 to 149 in 1d2c24e
export interface NavigateProps { | |
to: To; | |
replace?: boolean; | |
state?: any; | |
} |
```tsx | ||
declare function useLinkClickHandler< | ||
E extends Element = HTMLAnchorElement, | ||
S extends State = State | ||
>( | ||
declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>( | ||
to: To, | ||
options?: { | ||
target?: React.HTMLAttributeAnchorTarget; | ||
replace?: boolean; | ||
state?: S; | ||
state?: any; | ||
} | ||
): (event: React.MouseEvent<E, MouseEvent>) => void; | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
react-router/packages/react-router-dom/index.tsx
Lines 377 to 412 in 1d2c24e
export function useLinkClickHandler<E extends Element = HTMLAnchorElement>( | |
to: To, | |
{ | |
target, | |
replace: replaceProp, | |
state | |
}: { | |
target?: React.HTMLAttributeAnchorTarget; | |
replace?: boolean; | |
state?: any; | |
} = {} | |
): (event: React.MouseEvent<E, MouseEvent>) => void { | |
let navigate = useNavigate(); | |
let location = useLocation(); | |
let path = useResolvedPath(to); | |
return React.useCallback( | |
(event: React.MouseEvent<E, MouseEvent>) => { | |
if ( | |
event.button === 0 && // Ignore everything but left clicks | |
(!target || target === "_self") && // Let browser handle "target=_blank" etc. | |
!isModifiedEvent(event) // Ignore clicks with modifier keys | |
) { | |
event.preventDefault(); | |
// If the URL hasn't changed, a regular <a> will do a replace instead of | |
// a push, so do the same here. | |
let replace = | |
!!replaceProp || createPath(location) === createPath(path); | |
navigate(to, { replace, state }); | |
} | |
}, | |
[location, navigate, path, replaceProp, state, target, to] | |
); | |
} |
```tsx | ||
declare function useLinkPressHandler< | ||
S extends State = State | ||
>( | ||
declare function useLinkPressHandler( | ||
to: To, | ||
options?: { | ||
replace?: boolean; | ||
state?: S; | ||
state?: any; | ||
} | ||
): (event: GestureResponderEvent) => void; | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
react-router/packages/react-router-native/index.tsx
Lines 168 to 182 in 1d2c24e
export function useLinkPressHandler( | |
to: To, | |
{ | |
replace, | |
state | |
}: { | |
replace?: boolean; | |
state?: any; | |
} = {} | |
): (event: GestureResponderEvent) => void { | |
let navigate = useNavigate(); | |
return function handlePress() { | |
navigate(to, { replace, state }); | |
}; | |
} |
interface URLSearchParamsSetter { | ||
( | ||
nextInit: URLSearchParamsInit, | ||
navigateOptions?: { replace?: boolean; state?: State } | ||
): void; | ||
} | ||
type SetURLSearchParams = ( | ||
nextInit?: URLSearchParamsInit, | ||
navigateOpts?: : { replace?: boolean; state?: any } | ||
) => void; | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
react-router/packages/react-router-dom/index.tsx
Lines 418 to 460 in 1d2c24e
export function useSearchParams(defaultInit?: URLSearchParamsInit) { | |
warning( | |
typeof URLSearchParams !== "undefined", | |
`You cannot use the \`useSearchParams\` hook in a browser that does not ` + | |
`support the URLSearchParams API. If you need to support Internet ` + | |
`Explorer 11, we recommend you load a polyfill such as ` + | |
`https://github.com/ungap/url-search-params\n\n` + | |
`If you're unsure how to load polyfills, we recommend you check out ` + | |
`https://polyfill.io/v3/ which provides some recommendations about how ` + | |
`to load polyfills only for users that need them, instead of for every ` + | |
`user.` | |
); | |
let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit)); | |
let location = useLocation(); | |
let searchParams = React.useMemo(() => { | |
let searchParams = createSearchParams(location.search); | |
for (let key of defaultSearchParamsRef.current.keys()) { | |
if (!searchParams.has(key)) { | |
defaultSearchParamsRef.current.getAll(key).forEach(value => { | |
searchParams.append(key, value); | |
}); | |
} | |
} | |
return searchParams; | |
}, [location.search]); | |
let navigate = useNavigate(); | |
let setSearchParams = React.useCallback( | |
( | |
nextInit: URLSearchParamsInit, | |
navigateOptions?: { replace?: boolean; state?: any } | |
) => { | |
navigate("?" + createSearchParams(nextInit), navigateOptions); | |
}, | |
[navigate] | |
); | |
return [searchParams, setSearchParams] as const; | |
} |
interface URLSearchParamsSetter { | ||
( | ||
nextInit: URLSearchParamsInit, | ||
navigateOptions?: { replace?: boolean; state?: State } | ||
): void; | ||
type SetURLSearchParams = ( | ||
nextInit?: URLSearchParamsInit, | ||
navigateOpts?: : NavigateOptions | ||
) => void; | ||
|
||
interface NavigateOptions { | ||
replace?: boolean; | ||
state?: any; | ||
} | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
react-router/packages/react-router-native/index.tsx
Lines 260 to 289 in 1d2c24e
export function useSearchParams( | |
defaultInit?: URLSearchParamsInit | |
): [URLSearchParams, SetURLSearchParams] { | |
let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit)); | |
let location = useLocation(); | |
let searchParams = React.useMemo(() => { | |
let searchParams = createSearchParams(location.search); | |
for (let key of defaultSearchParamsRef.current.keys()) { | |
if (!searchParams.has(key)) { | |
defaultSearchParamsRef.current.getAll(key).forEach(value => { | |
searchParams.append(key, value); | |
}); | |
} | |
} | |
return searchParams; | |
}, [location.search]); | |
let navigate = useNavigate(); | |
let setSearchParams: SetURLSearchParams = React.useCallback( | |
(nextInit, navigateOpts) => { | |
navigate("?" + createSearchParams(nextInit), navigateOpts); | |
}, | |
[navigate] | |
); | |
return [searchParams, setSearchParams]; | |
} |
Thanks! |
Fixed types related to remix-run/history
State
in the docs.State
is now unused in the latest code.Thank you for the nice library!