DefinitelyTyped/types/react-router-dom/react-router-dom-tests.tsx
Cina Saffary c9912af2ba [react-router] update types for v5.1.0 (#38578)
* [react-router] update types for v5.1.0

* [react-router] add location state type params to history/location hooks

* [react-router-dom] add support for Link#to: Function

* [react-router-dom] add type definition for Route#component prop
2019-09-25 12:29:48 +01:00

44 lines
1.2 KiB
TypeScript

import * as React from 'react';
import { NavLink, NavLinkProps, match, Link, RouteComponentProps, LinkProps } from 'react-router-dom';
import * as H from 'history';
const getIsActive = (extraProp: string) => (match: match, location: H.Location) => !!extraProp;
interface Props extends NavLinkProps {
extraProp: string;
}
export default function(props: Props) {
const {extraProp, ...rest} = props;
const isActive = getIsActive(extraProp);
return (
<NavLink {...rest} isActive={isActive}/>
);
}
type OtherProps = RouteComponentProps<{
id: string;
}>;
const Component: React.FC<OtherProps> = props => {
if (!props.match) {
return null;
}
const { id } = props.match.params;
return <div>{id}</div>;
};
<Link to="/url" />;
const MyLink: React.FC<LinkProps> = props => <Link style={{ color: 'red' }} {...props} />;
<Link to="/url" component={MyLink} />;
<Link to={location => ({ ...location, pathname: '/pizza' })} />;
<NavLink to={location => ({ ...location, pathname: '/pizza' })} />;
const refCallback: React.Ref<HTMLAnchorElement> = node => {};
<Link to="/url" replace={true} innerRef={refCallback} />;
const ref = React.createRef<HTMLAnchorElement>();
<Link to="/url" replace={true} innerRef={ref} />;