发生反应，路由按钮点击

Question

全新的反应如此抬起头来

Im做一天教程的渔获物和我你在哪里集成路由重定向按钮点击的URL的步骤。我将它设置教程怎么说的：

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var History = ReactRouter.History; 

var createBrowserHistory = require('history/lib/createBrowserHistory'); 

var h = require('./helpers'); 
/* 
    App 
*/ 

var App = React.createClass({ 

    render : function() { 
    return (
     <div className="catch-of-the-day"> 
     <div className="menu"> 
      <Header tagline="Fresh Seafood Market" /> 
     </div> 
     <Order/> 
     <Inventory/> 
     </div> 
    ) 
    } 
}); 

/* 
    Header 
    <Header/> 
*/ 
var Header = React.createClass({ 
    render : function() { 
    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 
    <Order/> 
*/ 
var Order = React.createClass({ 
    render : function() { 
    return (
     <p>Order</p> 
    ); 
    } 
}) 

/* 
    Inventory 
    <Inventory/> 
*/ 
var Inventory = React.createClass({ 
    render : function() { 
    return (
     <p>Inventory</p> 
    ); 
    } 
}) 


/* 
    StorePicker 
    This will let us make <StorePicker/> 
*/ 

var StorePicker = React.createClass({ 
    mixins : [History], 
    goToStore : function(event) { 
    event.preventDefault(); 
    // get the data from the input 
    var storeId = this.refs.storeId.value; 
    this.history.pushState(null, '/store/' + storeId); 
    }, 
    render : function() { 
    return (
     <form className="store-selector" onSubmit={this.goToStore}> 
     <h2>Please Enter A Store</h2> 
     <input type="text" ref="storeId" defaultValue={h.getFunName()} required /> 
     <input type="Submit" /> 
     </form> 
    ); 
    } 

}); 

/* 
    Not Found 
*/ 

var NotFound = React.createClass({ 
    render : function() { 
    return <h1>Not Found! 404</h1> 
    } 
}); 


/* 
    Routes 
*/ 

var routes = (
    <Router history={createBrowserHistory()}> 
    <Route path="/" component={StorePicker}/> 
    <Route path="/store/:storeId" component={App}/> 
    <Route path="*" component={NotFound}/> 
    </Router> 
) 

ReactDOM.render(routes, document.querySelector('#main')); 

，但它并没有按下按钮重定向，我在控制台收到此错误：

uncaught TypeError: history.push is not a function

试图从它的折旧混入移开继link通过@ManoloSantos

给我，这是它与同样的错误运行我更新的代码：

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var ReactRouter = require('react-router'); 
var Route = ReactRouter.Route; 
var History = ReactRouter.History; 
import { Router, useRouterHistory } from 'react-router' 
import { createHashHistory } from 'history' 
var createBrowserHistory = require('history/lib/createBrowserHistory'); 
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false }) 
var h = require('./helpers'); 
/* 
    App 
*/ 

var App = React.createClass({ 

    render : function() { 
    return (
     <div className="catch-of-the-day"> 
     <div className="menu"> 
      <Header tagline="Fresh Seafood Market" /> 
     </div> 
     <Order/> 
     <Inventory/> 
     </div> 
    ) 
    } 
}); 

/* 
    Header 
    <Header/> 
*/ 
var Header = React.createClass({ 
    render : function() { 
    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 
    <Order/> 
*/ 
var Order = React.createClass({ 
    render : function() { 
    return (
     <p>Order</p> 
    ); 
    } 
}) 

/* 
    Inventory 
    <Inventory/> 
*/ 
var Inventory = React.createClass({ 
    render : function() { 
    return (
     <p>Inventory</p> 
    ); 
    } 
}) 


/* 
    StorePicker 
    This will let us make <StorePicker/> 
*/ 

var StorePicker = React.createClass({ 
    contextTypes: { 
    router: React.PropTypes.object.isRequired 
    }, 
    goToStore : function(event) { 
    event.preventDefault(); 
    // get the data from the input 
    var storeId = this.refs.storeId.value; 
    this.context.router.push(null, '/store/' + storeId); 
    }, 
    render : function() { 
    return (
     <form className="store-selector" onSubmit={this.goToStore}> 
     <h2>Please Enter A Store</h2> 
     <input type="text" ref="storeId" defaultValue={h.getFunName()} required /> 
     <input type="Submit" /> 
     </form> 
    ); 
    } 

}); 

/* 
    Not Found 
*/ 

var NotFound = React.createClass({ 
    render : function() { 
    return <h1>Not Found! 404</h1> 
    } 
}); 


/* 
    Routes 
*/ 

var routes = (
    <Router history={appHistory}> 
    <Route path="/" component={StorePicker}/> 
    <Route path="/store/:storeId" component={App}/> 
    <Route path="*" component={NotFound}/> 
    </Router> 
) 

ReactDOM.render(routes, document.querySelector('#main')); 

这个固定：

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
import { browserHistory, IndexRoute, useRouterHistory } from 'react-router' 
import { createHistory } from 'history' 
var h = require('./helpers'); 


const history = useRouterHistory(createHistory)({ 
    basename: '/' 
}) 


/* 
    App 
*/ 

var App = React.createClass({ 

    render : function() { 
    return (
     <div className="catch-of-the-day"> 
     <div className="menu"> 
      <Header tagline="Fresh Seafood Market" /> 
     </div> 
     <Order/> 
     <Inventory/> 
     </div> 
    ) 
    } 
}); 

/* 
    Header 
    <Header/> 
*/ 
var Header = React.createClass({ 
    render : function() { 
    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 
    <Order/> 
*/ 
var Order = React.createClass({ 
    render : function() { 
    return (
     <p>Order</p> 
    ) 
    } 
}) 

/* 
    Inventory 
    <Inventory/> 
*/ 
var Inventory = React.createClass({ 
    render : function() { 
    return (
     <p>Inventory</p> 
    ) 
    } 
}) 


/* 
    StorePicker 
    This will let us make <StorePicker/> 
*/ 

var StorePicker = React.createClass({ 
    goToStore : function(event) { 

    event.preventDefault(); 
    // get the data from the input 
    var storeId = this.refs.storeId.value; 
    browserHistory.push('/store/' + storeId); 
    }, 
    render : function() { 
    return (
     <form className="store-selector" onSubmit={this.goToStore}> 
     <h2>Please Enter A Store</h2> 
     <input type="text" ref="storeId" defaultValue={h.getFunName()} required /> 
     <input type="submit" /> 
     </form> 
    ) 
    } 

}); 

/* 
    Not Found 
*/ 

var NotFound = React.createClass({ 
    render : function() { 
    return <h1>Not Found!</h1> 
    } 
}); 


/* 
    Routes 
*/ 

var routes = (
    <Router history={browserHistory}> 
    <Route path="/" component={StorePicker}/> 
    <Route path="/store/:storeId" component={App}/> 
    <Route path="*" component={NotFound}/> 
    </Router> 
) 

ReactDOM.render(routes, document.querySelector('#main')); 

Answer 1

您使用的是过时的方式进行导航。在这page你有一个升级指导从mixin迁移。我在这里粘贴相关部分。

// v2.0.0 
// You have a couple options: 
// 1) Use context.router (especially if on the server) 
const DeepComponent = React.createClass({ 
    contextTypes: { 
    router: React.PropTypes.object.isRequired 
    }, 
    handleSubmit() { 
    this.context.router.push(...) 
    } 
} 

// 2) Use the singleton history 
import { browserHistory } from 'react-router' 
const DeepComponent = React.createClass({ 
    handleSubmit() { 
    browserHistory.push(...) 
    } 
} 

编辑：似乎from v2.4存在，简化了收购从上下文路由器的HOC。