2016-10-10 96 views
0

我正在尝试按照反应教程进行操作。我被卡在一个部分,我不断收到一条路线不匹配错误。react router位置“// playerOne”与任何路径不匹配

我的代码有什么问题,或者这种技术已经过时了吗?这里是我的框架版本:

"babel-preset-es2015": "^6.16.0", 
"react": "^15.3.2", 
"react-dom": "^15.3.2", 
"react-router": "^2.8.1" 

这里是我的路由器代码:

var React = require('react'); 
var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var hashHistory = ReactRouter.hashHistory; 
var IndexRoute = ReactRouter.IndexRoute; 
var Main = require('../components/Main'); 
var Home = require('../components/Home'); 
var PromptContainer = require('../containers/PromptContainer'); 

var routes = (
    <Router history={hashHistory}> 
     <Route path='/' component={Main}> 
      <IndexRoute component={Home} /> 
      <Route path='/playerOne' component={PromptContainer} /> 
      <Route path='/playerTwo/:playerOne' component={PromptContainer} />       
     </Route>   
    </Router> 
); 

module.exports = routes; 

这里是我的PromptContainer:

var React = require('react'); 

var PromptContainer = React.createClass({ 
    render: function() { 
     return (
      <div className="jumbotron col-sm-6 col-sm-offset-3 text-center"> 
       <h1>SOME HEADER TEXT</h1> 
       <div className="col-sm-12"> 
        <form> 
         <div className="form-group"> 
          <input className="form-control" 
          placeholder="Github username" 
          type="text" /> 
         </div> 
         <div className="form-group col-sm-4 col-sm-offset-4"> 
          <button className="btn btn-block btn-success" 
           type="submit"> 
           Continue 
          </button> 
         </div> 
        </form> 
       </div> 
      </div> 
     ); 
    } 
}); 

module.exports = PromptContainer; 
+0

为什么2溅在你的问题? 'react router Location“// playerOne”does not match any routes' – KOTIOS

+0

@MyMasterPeice这是我在浏览到此URL时得到的错误 http:// localhost:8080 /#/?_k = xxxx/playerOne – Corbee

+0

确保你正确地引用'PromptContainer'? – KOTIOS

回答

1

注:没有包含在你的哈希的历史记录网址因此下面是你如何重定向到手动路线

让我们假设基地址是:

http://localhost:8080/#/?_k=5mjzzn

那么你会重定向到PlayerOne为:

http://localhost:8080/#/playerOne/?_k=5mjzzn

注:如果您使用以下网址:

http://localhost:8080/#/?_k=5mjzzn/playerOne

它会工作,因为有历史记录包括,因此警告在控制台loged

警告:[反应路由器]位置“// playerOne”没有匹配的路由

+0

很酷,使用第一个url手动重定向! 但是它让我感到困惑的是,视频内容使用了第二个手动路由的URL并为他工作。 – Corbee

+0

也许他使用的是旧版本? – Corbee

+0

@Corbee你能否请我对视频的保护,我想指出他是如何提取他摘录的url结尾处的路由并详细解释 – KOTIOS

相关问题