notfoundpage.js

/**
 * NotFoundPage
 *
 * This is the page we show when the user visits a url that doesn't have a route
 */

import React from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';

import Button from 'components/Button';
import H1 from 'components/H1';

export function NotFound(props) {
  return (
    <article>
      <H1>Page not found.</H1>
      <Button
        handleRoute={function redirect() {
          props.changeRoute('/');
        }}
      >
        Home
      </Button>
    </article>
  );
}

NotFound.propTypes = {
  changeRoute: React.PropTypes.func,
};

// react-redux stuff
function mapDispatchToProps(dispatch) {
  return {
    changeRoute: (url) => dispatch(push(url)),
  };
}

// Wrap the component to inject dispatch and state into it
export default connect(null, mapDispatchToProps)(NotFound);

/**
 * NotFoundPage
 *
 * This is the page we show when the user visits a url that doesn't have a route
 */

import React from 'react';
import { browserHistory } from 'react-router';

import Button from 'components/Button';
import H1 from 'components/H1';

export default function NotFound(props) {
  return (
    <article>
      <H1>Page not found.</H1>
      <Button
        handleRoute={function redirect() {
          browserHistory.push('/');
        }}
      >
        Home
      </Button>
    </article>
  );
}