title: Stateless component React router
body: <p>I am new to React and Redux, I am actually creating a code of myself but I got stuck with a router kind of thing inside stateless component.</p>
  
  <p>So, Actually I need to route to a component by using this.props.history.push('/somepath'). This is not happening inside a stateless component.</p>
  
  <p>My Stateless component is</p>
  
  <pre><code>import React from "react"; // eslint-disable-line no-unused-vars
  import "bootstrap/dist/css/bootstrap.min.css";
  import "./header.css";
  
  const Header = () =&gt; ({
  
      handleAuthor() {
          this.props.history('/somepath')// this is not working
      },
  
      render(){
          return (
              &lt;div className = "header"&gt;
                  &lt;h1 onClick = {this.handleAuthor.bind(this)}&gt;{this.props.headerText}&lt;/h1&gt;
              &lt;/div&gt;
          );
      } 
  });
  
  export default Header;
  </code></pre>
  
  <p>I am calling this inside another stateless component like mainlayout</p>
  
  <pre><code>import React from "react"; // eslint-disable-line no-unused-vars
  import Header from "../header/Header"; // eslint-disable-line no-unused-vars
  import Footer from "../footer/Footer"; // eslint-disable-line no-unused-vars
  import "./mainLayout.css";
  
  const MainLayout = props =&gt; ({
      render() {
          return (
              &lt;div className="App"&gt;
                  &lt;Header headerText = "RK Boilerplate"/&gt;
                  &lt;div className = "mainLayout"&gt;
                      &lt;main&gt;{props.children}&lt;/main&gt;
                  &lt;/div&gt;
                  &lt;Footer /&gt;
              &lt;/div&gt;
          );
      }
  });
  
  export default MainLayout;
  </code></pre>
  
  <p>My main file index.js looks like this</p>
  
  <pre><code>import React from "react"; // eslint-disable-line no-unused-vars
  import ReactDOM from "react-dom"; // eslint-disable-line no-unused-vars
  import { matchRoutes, renderRoutes } from "react-router-config"; // eslint-disable-line no-unused-vars
  import { Router } from "react-router-dom"; // eslint-disable-line no-unused-vars
  import { Switch } from "react-router"; // eslint-disable-line no-unused-vars
  import { Provider } from "react-redux"; // eslint-disable-line no-unused-vars
  import store from "./store"; // eslint-disable-line no-unused-vars
  import routes from "./routes"; // eslint-disable-line no-unused-vars
  import MainLayout from "./components/mainLayout/MainLayout"; // eslint-disable-line no-unused-vars
  
  import createHistory from "history/createBrowserHistory";
  let history = createHistory();
  const App =  document.getElementById("app");
  
  export default App;
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;MainLayout&gt;
              &lt;Router history= {history}&gt;
                  &lt;Switch&gt;
                      {renderRoutes(routes)}
                  &lt;/Switch&gt;
              &lt;/Router&gt;
          &lt;/MainLayout&gt;                 
      &lt;/Provider&gt;, 
      App);
  </code></pre>
  
  <p>SO what i need is I have to route from the header to another component where   this component and path is given in a router file</p>
  
  <p>router.js</p>
  
  <pre><code>import Home from "../containers/Home";
  import About from "../containers/About";
  import CreateUser from "../containers/CreateUser";
  
  import Layout from "../containers/Layout";
  
  const routes = [
      { path: "/",
          exact: true,
          component: Layout
      },
      { path: "/home",
          exact: true,
          component: Home
      },
      {
          path:"/About",
          exact: true,
          component: About
      },
      {
          path:"/createUser",
          exact: true,
          component: CreateUser
      }
  ];
  
  export default routes;
  </code></pre>
  
  <p>I got an error like push of undefined , when i tried to route from header.
  Am I missing something is there any change that i should do here.</p>
  
  <p>Thanks in advance.</p>