add html attributes to redux-first-router-link (#22870)

This commit is contained in:
Oscar Busk 2018-01-17 19:02:42 +01:00 committed by Wesley Wigham
parent a04b55e680
commit 08812a1004
2 changed files with 18 additions and 18 deletions

View File

@ -9,8 +9,6 @@ import { Location } from 'redux-first-router';
export type To = string | string[] | object;
export type OnClick = false | ((e: React.MouseEvent<HTMLElement>) => void);
export interface Match<P> {
params: P;
isExact: boolean;
@ -18,14 +16,12 @@ export interface Match<P> {
url: string;
}
export interface LinkProps {
// Unfortunately we can't pass `HTMLAnchorElement` since the `tagName` attribute allows you to use other tags than anchor.
export interface LinkProps extends React.HTMLAttributes<HTMLElement> {
to: To;
redirect?: boolean;
replace?: boolean;
tagName?: string;
children?: React.ReactNode;
onPress?: OnClick;
onClick?: OnClick;
down?: boolean;
shouldDispatch?: boolean;
target?: string;
@ -33,18 +29,7 @@ export interface LinkProps {
export default class Link extends React.Component<LinkProps> {}
export interface NavLinkProps {
to: To;
redirect?: boolean;
replace?: boolean;
children?: React.ReactNode;
onPress?: OnClick;
onClick?: OnClick;
down?: boolean;
shouldDispatch?: boolean;
target?: string;
className?: string;
style?: React.CSSProperties;
export interface NavLinkProps extends LinkProps {
activeClassName?: string;
activeStyle?: React.CSSProperties;
ariaCurrent?: string;

View File

@ -17,6 +17,16 @@ export default () => {
{ /* as an action object (RECOMMENDED APPROACH SO YOU CAN CHANGE ALL URLs FROM YOUR ROUTESMAP): */ }
<Link to={{type: 'LIST', payload: { category: 'fp' }}}>FP</Link>
<Link
to='/'
key='1'
className='home-link'
style={{
color: 'hotpink',
}}
id='the-home-link'
>Home</Link>
<NavLink
to={{ type: 'LIST', payload: { category: 'redux-first-router' } }}
activeClassName='active'
@ -26,6 +36,11 @@ export default () => {
isActive={(match, location) => (location.payload as Payload).category === 'redux-first-router'} >
Redux First Router
</NavLink>
<NavLink
to='/'
className='nav-link'
>Nav link with class</NavLink>
</div>
);
};