React Router显示为未定义，我如何不使用window.location重新路由到某个页面

Question

 var React = require('react'); var PropTypes = React.PropTypes; var SearchStore = require('../stores/SearchStore.js'); var Router = require('react-router'); var SearchResults = React.createClass({ getInitialState: function() { return( {searchResults: SearchStore.all()}); }, componentDidMount: function() { this.searchResultsToken = SearchStore.addListener(this.newSearchResults); }, componentWillUnmount: function() { this.searchResultsToken.remove(); }, newSearchResults: function() { this.setState({searchResults: SearchStore.all()}); }, userDirect: function(id){ window.location = '/#/user/' + id }, songDirect: function(id){ window.location = '/#/songs/' + id }, playlistDirect: function(id){ window.location = '/#/playlists/' + id }, createSearchResults: function() { return this.state.searchResults.map(function(result, idx){ if (result.username !== undefined){ return <li key={idx} onClick={this.userDirect.bind(null, result.id)}>{result.username}</li>; }else if (result.genre !== undefined){ return <li key={idx} onClick={this.songDirect.bind(null, result.id)} >{result.title}</li>; }else{ return <li key={idx} onClick={this.playlistDirect.bind(null, result.id)} >{result.title}</li>; } }.bind(this)); }, render: function() { debugger; return ( <ul id='search-results'> {this.createSearchResults()} </ul> ); } }); module.exports = SearchResults; 

The redirects when using window.location only work some of the time and aren't the general way you're supposed to do things in react, when I try to require the router it always shows up as undefined for some reason. I'm not sure why i cant require it, I saw somewhere else I would likely use a navigation mixin, but I'm still unsure. Any help would be greatly appreciated.

Answer 1

Use this:

// this is the redirect. Use it whereever you want
  this.context.router.push('/search');

// this should appear outside the element
    SearchResults.contextTypes = {
         router: React.PropTypes.object.isRequired
     };
     module.exports = SearchResults;