react-router-dom isn't redirecting to any path except '/'!

Question

I am using react router-router-dom and I can't redirect to any path like <Route path="/store" component={App}/> ! but it only redirects to '/' this path. I couldn't find what's wrong here! here is a screenshot of my dependencies

I m using webpac^2 . react-router-dom^4.1.1

here is my code

import  React from  "react";
import  { render } from "react-dom";
import {BrowserRouter  as Router, Route, Link} from "react-router-dom";
import createHistory from "history/createHashHistory"
import helpers from './helpers';

require('./main.css');
let history = createHistory();


/*App*/
class App extends React.Component{
    constructor(){
        super();
    }
    render () {
        return(
            <div className="catch-of-the-day">
                <div className="menu">
                    <Header tagline="Fresh sea food market."/>
                </div>
                <Order/>
                <Inventory/>
            </div>
        );
    }
}

/*HEADER*/
class Header extends React.Component{
    constructor(){
        super();
    }

    render(){
        return(
            <header className="top">
                <h1>
                    catch
                    <span className="ofThe">
                        <span className="of">of</span>
                        <span className="the">the</span>
                    </span>
                    day
                </h1>
                <h3 className="tagline"><span>{this.props.tagline}</span></h3>
            </header>
        );
    }
}

/*order*/
class Order extends React.Component{
    constructor(){
        super();
    }

    render(){
        return(
            <p>This is Order</p>
        );
    }
}

/*Inventory*/
class Inventory extends React.Component{
    constructor(){
        super();
    }

    render(){
        return(
            <p>This is Inventory</p>
        );
    }
}

/* this let us make Storepicker */
class Storepicker extends React.Component{
    constructor() {
        super();
        this.state = { storeName : ''}
    }

    goToStore (event){
        event.preventDefault();
        /* get the data from the input */
        let storeID = event.target.store_name.value;
        history.push('/store/' + storeID);


    }

    render(){
        return(
            <form className="store-selector" onSubmit={this.goToStore}>
                <h2>Please enter a store!</h2>
                <input type="text" name="store_name" defaultValue={helpers.getFunName()}/>
                <input type="submit"/>
            </form>
        );
    }

}


let Routers = () =>{
    return (
        <Router>
            <div>
                <Route path="/store" component={App}/>
                <Route path="/" component={Storepicker}/>
            </div>
        </Router>
    );
};
render(
  <Routers/>,
    document.getElementById("app")
);

Answer 1

You are calling history.push('/store/' + storeID); which would look like /store/<someid> however, you do not have a route for your store you are pushing. Add the /id to your route and you should be good.

<Route path="/store(/:id)" component={App}/>

Note I used parenthesis around the additional route meaning its optional. you can remove these if /store/id is always going to be the route.