Skip to content

Instantly share code, notes, and snippets.

@beck

beck/search-button.jsx

Created May 7, 2018 15:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save beck/11945d433f905c512a814ed6bfea5a21 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save beck/11945d433f905c512a814ed6bfea5a21 to your computer and use it in GitHub Desktop.
Download ZIP
React (+react router) relative url button
Raw
search-button.jsx
import React from 'react';
import styled from 'react-emotion';
import { Link, withRouter } from 'react-router-dom';
import searchIcon from './search.svg';
const StyledLink = styled(Link)`
align-items: center;
background-color: #00A2E1;
background-image: url(${searchIcon});
`;
const SearchButton = ({ match: { url } }) => (
// caveat: fails when on home page due to double slashing
<StyledLink to={`${url}/search`}>
<span>Search products</span>
</StyledLink>
);
export default withRouter(SearchButton);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment