title: react shards history.push only appends to url, will not redirect
body: <p>I have a signup component which has a form, and a handleFormSubmit. It calls an api to route to the server which runs a sequelize create. That all works, but once the row is inserted, I would like to redirect to a certain view. </p>
  
  <p>Currently in the promise after the insert, I have a history.push("/dashboard"). However this is just appending to the browser url and not actually redirecting. </p>
  
  <p>here is the signup component so you can see the form, and also the handleFormSubmit. I would simply like it to redirect to the "/dashboard" route:</p>
  
  <pre><code>import React, { Component } from "react";
  import PropTypes from "prop-types";
  import {
    Card,
    CardHeader,
    ListGroup,
    ListGroupItem,
    Row,
    Col,
    Form,
    FormGroup,
    FormInput,
    FormSelect,
    FormTextarea,
    Button
  } from "shards-react";
  
  // GET DATA FROM API (which calls routes from express server)
  import API from "../../utils/API";
  import Auth from "../../utils/Auth";
  import { createHashHistory } from 'history'
  export const history = createHashHistory();
  
  class Signup extends Component {
    state = {
    };
  
    handleInputChange = event =&gt; {
      const { id, value } = event.target;
      this.setState({
        [id]: value
      });
    };
  
    handleFormSubmit = event =&gt; { 
      event.preventDefault();
      // console.log("Yo");
        API.addUser({
  
          firstName: this.state.feFirstName,
          lastName: this.state.feLastName,
          email: this.state.feEmail,
          password: this.state.fePassword,
          address1: this.state.feAddress,
          city: this.state.feCity,
          state: this.state.feInputState,
          zip: this.state.feZipCode,
          description: this.state.feDescription,
          userName: this.state.feEmail,
          imageLink: this.state.feImage,
          title: this.state.feTitle,
          github: this.state.feGithub,
          linkedin: this.state.feLinkedIn,
          phone: "",
          userRating: "1",
          bizRating: "1"
  
        })
          .then( res =&gt;
            // console.log("Added,apparently");
            {
              // set the token and then redirect to the "/books" route
              // Auth.setToken(res.data.token);
              Auth.setToken(res.data.token);
              // console.log("TOKEN: " , res.data.token);
              console.log(res.data);
              history.push(`/dashboard/`);
            })
          .catch(err =&gt; console.log(err));
      // }
    }
  
  
  
    render() {
      return (
  
      &lt;Card small className="mb-4"&gt;
        &lt;CardHeader className="border-bottom"&gt;
          &lt;h6 className="m-0"&gt;Personal Info&lt;/h6&gt;
        &lt;/CardHeader&gt;
        &lt;ListGroup flush&gt;
          &lt;ListGroupItem className="p-3"&gt;
            &lt;Row&gt;
              &lt;Col&gt;
                &lt;Form&gt;
                  &lt;Row form&gt;
                    {/* First Name */}
                    &lt;Col md="6" className="form-group"&gt;
                      &lt;label htmlFor="feFirstName"&gt;First Name&lt;/label&gt;
                      &lt;FormInput
                        id="feFirstName"
                        placeholder="First Name"
                      // value=""
                      onChange={this.handleInputChange}
                      /&gt;
                    &lt;/Col&gt;
                    {/* Last Name */}
                    &lt;Col md="6" className="form-group"&gt;
                      &lt;label htmlFor="feLastName"&gt;Last Name&lt;/label&gt;
                      &lt;FormInput
                        id="feLastName"
                        placeholder="Last Name"
                      // value=""
                      onChange={this.handleInputChange}
                      /&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
                  &lt;Row form&gt;
                    {/* Email */}
                    &lt;Col md="6" className="form-group"&gt;
                      &lt;label htmlFor="feEmail"&gt;Email&lt;/label&gt;
                      &lt;FormInput
                        type="email"
                        id="feEmail"
                        placeholder="Email Address"
                      // value=""
                      onChange={this.handleInputChange}
                        autoComplete="email"
                      /&gt;
                    &lt;/Col&gt;
                    {/* Password */}
                    &lt;Col md="6" className="form-group"&gt;
                      &lt;label htmlFor="fePassword"&gt;Password&lt;/label&gt;
                      &lt;FormInput
                        type="password"
                        id="fePassword"
                        placeholder="Password"
                      // value=""
                      onChange={this.handleInputChange}
                        autoComplete="current-password"
                      /&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
                  &lt;FormGroup&gt;
                    &lt;label htmlFor="feAddress"&gt;Address&lt;/label&gt;
                    &lt;FormInput
                      id="feAddress"
                      placeholder="Address"
                      // value=""
                      onChange={this.handleInputChange}
                    /&gt;
                  &lt;/FormGroup&gt;
                  &lt;Row form&gt;
                    {/* City */}
                    &lt;Col md="6" className="form-group"&gt;
                      &lt;label htmlFor="feCity"&gt;City&lt;/label&gt;
                      &lt;FormInput
                        id="feCity"
                        placeholder="City"
                      // value=""
                      onChange={this.handleInputChange}
                      /&gt;
                    &lt;/Col&gt;
                    {/* State */}
                    &lt;Col md="4" className="form-group"&gt;
                      &lt;label htmlFor="feInputState"&gt;State&lt;/label&gt;
                      &lt;FormSelect id="feInputState"&gt;
                        &lt;option&gt;Choose...&lt;/option&gt;
                        &lt;option&gt;...&lt;/option&gt;
                      &lt;/FormSelect&gt;
                    &lt;/Col&gt;
                    {/* Zip Code */}
                    &lt;Col md="2" className="form-group"&gt;
                      &lt;label htmlFor="feZipCode"&gt;Zip&lt;/label&gt;
                      &lt;FormInput
                        id="feZipCode"
                        placeholder="Zip"
                      // value=""
                      onChange={this.handleInputChange}
                      /&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
                  &lt;Row form&gt;
                    {/* Title */}
                    &lt;Col md="6" className="form-group"&gt;
                      &lt;label htmlFor="feTitle"&gt;Title&lt;/label&gt;
                      &lt;FormInput
                        id="feTitle"
                        placeholder="Title"
                      // value=""
                      onChange={this.handleInputChange}
                      /&gt;
                    &lt;/Col&gt;
                    {/* Image */}
                    &lt;Col md="6" className="form-group"&gt;
                      &lt;label htmlFor="feImage"&gt;Image&lt;/label&gt;
                      &lt;FormInput
                        id="feImage"
                        placeholder="Image"
                      // value=""
                      onChange={this.handleInputChange}
                      /&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
                  &lt;Row form&gt;
                    {/* Github */}
                    &lt;Col md="6" className="form-group"&gt;
                      &lt;label htmlFor="feGithub"&gt;Github&lt;/label&gt;
                      &lt;FormInput
                        id="feGithub"
                        placeholder="Github Profile"
                      // value=""
                      onChange={this.handleInputChange}
                      /&gt;
                    &lt;/Col&gt;
                    {/* LinkedIn */}
                    &lt;Col md="6" className="form-group"&gt;
                      &lt;label htmlFor="feLinkedIn"&gt;LinkedIn&lt;/label&gt;
                      &lt;FormInput
                        id="feLinkedIn"
                        placeholder="LinkedIn Profile"
                      // value=""
                      onChange={this.handleInputChange}
                      /&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
                  &lt;Row form&gt;
                    {/* Description */}
                    &lt;Col md="12" className="form-group"&gt;
                      &lt;label htmlFor="feDescription"&gt;Description&lt;/label&gt;
                      &lt;FormTextarea id="feDescription" rows="5"
                        // value=""
                        onChange={this.handleInputChange} 
                        /&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
                  &lt;Button onClick={this.handleFormSubmit} theme="accent"&gt;Add Account&lt;/Button&gt;
                &lt;/Form&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/ListGroupItem&gt;
        &lt;/ListGroup&gt;
      &lt;/Card&gt;
    );
    }
  }
  
  export default Signup;
  
  </code></pre>
  
  <p>I also want to note that this is the shards dashboard template, so this is how the client app.js is set.</p>
  
  <pre><code>import { BrowserRouter as Router, Route } from "react-router-dom";
  
  import routes from "./routes";
  import withTracker from "./withTracker";
  
  import "bootstrap/dist/css/bootstrap.min.css";
  import "./styles/shards-dashboards.1.1.0.min.css";
  
  export default () =&gt; (
    &lt;Router basename={process.env.REACT_APP_BASENAME || ""}&gt;
      &lt;div&gt;
        {routes.map((route, index) =&gt; {
          return (
            &lt;Route
              key={index}
              path={route.path}
              exact={route.exact}
              component={withTracker(props =&gt; {
                return (
                  &lt;route.layout {...props}&gt;
                    &lt;route.component {...props} /&gt;
                  &lt;/route.layout&gt;
                );
              })}
            /&gt;
          );
        })}
      &lt;/div&gt;
    &lt;/Router&gt;
  );
  </code></pre>
  
  <p>And that being the case, it references my routes.js like this. so I do have routes set. </p>
  
  <pre><code>// CUSTOM ROUTES
  import Home from "./views/Home";
  import Portfolio from "./views/UserPortfolio";
  import AddFolio from "./views/PortfolioAdd";
  import AddProject from "./views/ProjectAdd";
  import Signup from "./views/SignUp";
  import Dashboard from "./views/Dashboard";
  
  export default [
    {
      path: "/",
      exact: true,
      layout: DefaultLayout,
      component: () =&gt; &lt;Redirect to="/home" /&gt;
    },
    {
      path: "/home",
      layout: DefaultLayout,
      component: Home
    },
    {
      path: "/folio",
      layout: DefaultLayout,
      component: Portfolio
    }, 
    {
      path: "/addfolio",
      layout: DefaultLayout,
      component: AddFolio
    },   
    {
      path: "/addproject",
      layout: DefaultLayout,
      component: AddProject
    },   
  
    // USER ROUTES
    {
      path: "/signup",
      layout: DefaultLayout,
      component: Signup
    }, 
    {
      path: "/dashboard",
      layout: DefaultLayout,
      component: Dashboard
    },  
  </code></pre>
  
  <p>In the end I would simply like to see a redirect to ANY route in the promise, doesn't matter to me which one. Just so I see it working. </p>
  
  <p>so please let me know what info needs to be provided, because i'm not sure how familiar everyone is with a shards implementation, as it is apparently sort of different from a standard react route setup. I'm sure I'm leaving out some info. Thanks all!</p>