2016-10-10 52 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

相關問題