0

我正在使用反应router-router-dom，我无法重定向到任何路径like <Route path="/store" component={App}/>！但它只重定向到'/'这条路径。我找不到这里有什么问题！ 这是我的依赖项的屏幕截图

我正在使用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")
);
4

1 回答 1

0

您正在打电话history.push('/store/' + storeID);，但是看起来/store/<someid>您没有要推送的商店的路线。将其添加/id到您的路线中，您应该会很好。

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

注意我在附加路线周围使用了括号，这意味着它是可选的。如果 /store/id 始终是路线，您可以删除这些。

于 2017-05-12T20:15:29.353 回答