發生反應，路由按鈕點擊

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。