2016-03-18 30 views
0
指定所需的道具`

我試圖實現react-router,但我發現下面的錯誤:陣營的路由器,to`不是在`Link`

失敗propType:必需的道具to未指定在Link。檢查 的渲染方法app

我不確定我的代碼有什麼問題。

./app/app.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory } from 'react-router'; 

// Layouts 
import App from 'layouts/app'; 

// Components 
import Portfolio from 'ui/portfolio'; 
import Blog  from 'ui/blog'; 
import TimeLine from 'ui/timeline'; 
import About  from 'ui/about' 
import Contact from 'ui/contact' 


ReactDOM.render((
    <Router history={browserHistory}> 

     <Route component={App}> 

      <Route path="/" component={Portfolio} /> 
      <Route path="/blog" component={Blog} /> 
      <Route path="/timeline" component={TimeLine} /> 
      <Route path="/about" component={About} /> 
      <Route path="/contact" component={Contact} /> 

     </Route> 

    </Router> 
), document.getElementById('root')); 

./app/layouts/app.js

import React from 'react'; 
import { Link } from 'react-router'; 

export default React.createClass({ 
    render: function() { 
     return (
     <div className="app"> 
      <nav> 
       <Link to="/">Portfolio</Link><br /> 
       <Link to="/blog">Blog</Link><br /> 
       <Link toc="/timeline">TimeLine</Link><br /> 
       <Link toc="/about">About</Link><br /> 
       <Link toc="/contact">Contact</Link> 
      </nav> 
      <main> 
       {this.props.children} 
      </main> 
     </div> 
    ) 
    } 
}); 

你可以看到我使用的是依賴以下。

"dependencies": { 
    "axios": "^0.9.0", 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3", 
    "react-redux": "^4.0.6", 
    "react-router": "^2.0.0", 
    "redux": "^3.3.1", 
    "redux-thunk": "^1.0.3" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.3.13", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-2": "^6.3.13", 
    "gulp": "^3.9.0", 
    "gulp-serve": "^1.2.0", 
    "json-server": "^0.8.6", 
    "webpack-stream": "^3.1.0" 
    } 

任何想法發生了什麼?

謝謝!

回答

1
<Link toc="/timeline">TimeLine</Link><br /> 
<Link toc="/about">About</Link><br /> 
<Link toc="/contact">Contact</Link> 

你想totoc

<Link to="/timeline">TimeLine</Link><br /> 
<Link to="/about">About</Link><br /> 
<Link to="/contact">Contact</Link>