反应路由器,所需的道具“to”未在“链接”中指定

React-Router, required prop `to` was not specified in `Link`

本文关键字:to 未在 链接 路由器      更新时间:2023-09-26

我正在尝试实现react-router但出现以下错误:

失败的道具类型:Link 中未指定所需的道具to。检查 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"
  }

知道发生了什么吗?

谢谢!

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

你想要to而不是toc

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