// Component const Logo = (props) => { const { ...others } = props return ( <Link to={home.home.path} {...others}> <span style={{ fontFamily: secondary, fontSize: '2em', color: 'white', textShadow: textLevel1 }}>Crate</span> </Link> ) }
const NotFoundPage = () => { return ( <div> <h4> 404 Page Not Found </h4> <Link to="/"> Go back to homepage </Link> </div> ); }
// Component const Item = (props) => { const { name, slug, description, image } = props.product return ( <Link to={routes.product.path(slug)}> <Card style={{ width: '25em', margin: '2.5em auto', backgroundColor: white }}> <img src={routeImage + image} alt={name} style={{ width: '100%' }}/> <div style={{ padding: '1em 1.2em' }}> <H4 font="secondary" style={{ color: black }}>{ name }</H4> <p style={{ color: grey2, marginTop: '1em' }}>{ description }</p> </div> </Card> </Link> ) }
const HomePage = () => { return ( <div> <h1>React Slingshot</h1> <h2>Get Started</h2> <ol> <li>Review the <Link to="/fuel-savings">demo app</Link></li> <li>Remove the demo and start coding: npm run remove-demo</li> </ol> </div> ); }
withRouter( ({ staticContext, history, location, match, ...rest }: Props) => ( <Link {...rest} onClick={evt => { if (rest.onClick) rest.onClick(evt); if (evt.metaKey || evt.ctrlKey) return; if (window.appUpdateAvailable === true) { evt.preventDefault(); // This is copied from react-router's <Link /> component and is basically what it does internally const location = typeof rest.to === 'string' ? createLocation(rest.to, null, null, history.location) : rest.to; return (window.location = history.createHref(location)); } }} /> ) )
<Link to={to} style={
// Component const Profile = (props) => ( <div> {/* SEO */} <Helmet> <title>My Profile - Crate</title> </Helmet> {/* Top title bar */} <Grid style={{ backgroundColor: grey }}> <GridCell style={{ padding: '2em', textAlign: 'center' }}> <H3 font="secondary">My profile</H3> </GridCell> </Grid> <Grid> <GridCell style={{ padding: '2em', textAlign: 'center' }}> <H4 style={{ marginBottom: '0.5em' }}>{props.user.details.name}</H4> <p style={{ color: grey2, marginBottom: '2em' }}>{props.user.details.email}</p> <Link to={userRoutes.subscriptions.path}> <Button theme="primary">Subscriptions</Button> </Link> <Button theme="secondary" onClick={props.logout} style={{ marginLeft: '1em' }}>Logout</Button> </GridCell> </Grid> </div> )
// Since this component is simple and static, there's no parent container for it. const AboutPage = () => { return ( <div> <h2 className="alt-header">About</h2> <p> This example app is part of the <a href="https://github.com/coryhouse/react-slingshot">React-Slingshot starter kit</a>. </p> <p> <Link to="/badlink">Click this bad link</Link> to see the 404 page. </p> </div> ); }
const mainListItems = ({ classes }) => ( <div> <Link to="/" className={classes.link}> <ListItem button> <ListItemIcon> </ListItem> </Link> <Link to="/reports" className={classes.link}> <ListItem button> <ListItemIcon> </ListItem> </Link> <Link to="/funnels" className={classes.link}> <ListItem button> <ListItemIcon> </ListItem> </Link> <Link to="/about" className={classes.link}> <ListItem button> <ListItemIcon>
<p style={{ marginTop: '0.5em' }}>You can go to <Link to={home.home.path}>home page.</Link> or contact us for any help.</p>
// Component const Logo = (props) => { const { ...others } = props return ( <Link to={home.home.path} {...others}> <span style={{ fontFamily: secondary, fontSize: '2em', color: 'white', textShadow: textLevel1 }}>Crate</span> </Link> ) }
// Component const Item = (props) => { const { name, slug, description, image } = props.product return ( <Link to={routes.product.path(slug)}> <Card style={{ width: '25em', margin: '2.5em auto', backgroundColor: white }}> <img src={routeImage + image} alt={name} style={{ width: '100%' }}/> <div style={{ padding: '1em 1.2em' }}> <H4 font="secondary" style={{ color: black }}>{ name }</H4> <p style={{ color: grey2, marginTop: '1em' }}>{ description }</p> </div> </Card> </Link> ) }
// Component const Profile = (props) => ( <div> {/* SEO */} <Helmet> <title>My Profile - Crate</title> </Helmet> {/* Top title bar */} <Grid style={{ backgroundColor: grey }}> <GridCell style={{ padding: '2em', textAlign: 'center' }}> <H3 font="secondary">My profile</H3> </GridCell> </Grid> <Grid> <GridCell style={{ padding: '2em', textAlign: 'center' }}> <H4 style={{ marginBottom: '0.5em' }}>{props.user.details.name}</H4> <p style={{ color: grey2, marginBottom: '2em' }}>{props.user.details.email}</p> <Link to={userRoutes.subscriptions.path}> <Button theme="primary">Subscriptions</Button> </Link> <Button theme="secondary" onClick={props.logout} style={{ marginLeft: '1em' }}>Logout</Button> </GridCell> </Grid> </div> )
<p style={{ marginTop: '0.5em' }}>You can go to <Link to={home.home.path}>home page.</Link> or contact us for any help.</p>
<Link to={to} style={