Javascript react路由器dom isn'；t重定向到除'/'；！

我正在使用react

路由器dom

，无法重定向到任何路径

，如

！但它只重定向到此路径。 我找不到这里出了什么问题

我正在使用

webpac^2

。 反应路由器dom^4.1.1

这是我的密码

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")
);

从“React”导入React；
从“react dom”导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“历史记录/createHashHistory”导入createHistory
从“./helpers”导入帮助程序；
要求（'./main.css'）；
让history=createHistory（）；
/*应用程序*/
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
}
渲染（）{
返回(
);
}
}
/*标题*/
类头扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
返回(
抓住
属于
这个
白天
{this.props.tagline}
);
}
}
/*命令*/
类顺序扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
返回(
这是订单

);
}
}
/*存货*/
类清单扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
返回(
这是库存

);
}
}
/*这让我们做一个店主*/
类Storepicker扩展了React.Component{
构造函数（）{
超级（）；
this.state={storeName:'}
}
戈托斯托尔（事件）{
event.preventDefault（）；
/*从输入中获取数据*/
让storeID=event.target.store\u name.value；
history.push（'/store/'+storeID）；
}
render（）{
返回(
请进入商店！
);
}
}
让路由器=（）=>{
返回(
);
};
渲染(
,
document.getElementById（“应用程序”）
);

您正在调用

history.push（'/store/'+storeID）

看起来像是

/store/

，但是，您没有要推送的门店的路线。将

/id

添加到您的路线中，您应该很好

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

注：我在附加路线周围使用了括号，表示其为可选路线。如果/store/id始终是路由，则可以删除这些