反应路由器链接不起作用 [英] React-router link doesn't work
本文介绍了反应路由器链接不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
React-router 的开端非常糟糕......看起来基本的东西不起作用.使用 react-router 2.0.0 我的 Link 组件将 URL 更新为/about,但我的页面在此之后不会呈现 About 组件...
入口点js
var React = require('react');var ReactDOM = require('react-dom');var Router = require('react-router').Router;var Route = require('react-router').Route;var hashHistory = require('react-router').hashHistory;var App = require('./components/App.react');var About = require('./components/About');ReactDOM.render(<路由器历史={hashHistory} ><Route path="/" component={App}><Route path="about" component={About}/></路线></路由器>,document.getElementById('app'));
App.js
'use strict';var React = require('react');var Link = require('react-router').Link;var Header = require('./Header');var UserPanel = require('./UserPanel');var ModelPanel = require('./ModelPanel.react');var EventPanel = require('./event/EventPanel');var VisPanel = require('./vis/VisPanel');var LoginForm = require('./LoginForm');var AppStore = require('../stores/AppStore');var AppStates = require('../constants/AppStates');var App = React.createClass({[...省略代码...]渲染:函数(){var viewStateUi = getViewStateUi(this.state.appState);返回 (<div><标题/><Link to="/about">关于</Link>{viewStateUi}
);}});
解决方案
由于 'About' 路由是 'App' 路由的子级,你需要添加 this.props.children
到您的应用组件:
var App = React.createClass({渲染:函数(){var viewStateUi = getViewStateUi(this.state.appState);返回 (<div><标题/><Link href="/about">关于</Link>{viewStateUi}{this.props.children}
);}});
或分开您的路线:
ReactDOM.render(<路由器历史={hashHistory} ><Route path="/" component={App}/><Route path="/about" component={About}/></路由器>,document.getElementById('app'));
React-router is off to a really bad start... What seems basic doesn't work. Using react-router 2.0.0 my Link component updates the URL to be /about, but my page doesn't render the About component after that...
Entry point js
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = require('react-router').hashHistory;
var App = require('./components/App.react');
var About = require('./components/About');
ReactDOM.render(
<Router history={hashHistory} >
<Route path="/" component={App}>
<Route path="about" component={About} />
</Route>
</Router>,
document.getElementById('app')
);
App.js
'use strict';
var React = require('react');
var Link = require('react-router').Link;
var Header = require('./Header');
var UserPanel = require('./UserPanel');
var ModelPanel = require('./ModelPanel.react');
var EventPanel = require('./event/EventPanel');
var VisPanel = require('./vis/VisPanel');
var LoginForm = require('./LoginForm');
var AppStore = require('../stores/AppStore');
var AppStates = require('../constants/AppStates');
var App = React.createClass({
[... code omitted ...]
render: function() {
var viewStateUi = getViewStateUi(this.state.appState);
return (
<div>
<Header />
<Link to="/about">About</Link>
{viewStateUi}
</div>
);
}
});
解决方案
Since the 'About' route is a child of the 'App' route, you need to either add this.props.children
to your App component:
var App = React.createClass({
render: function() {
var viewStateUi = getViewStateUi(this.state.appState);
return (
<div>
<Header />
<Link href="/about">About</Link>
{viewStateUi}
{this.props.children}
</div>
);
}
});
or separate your routes:
ReactDOM.render(
<Router history={hashHistory} >
<Route path="/" component={App} />
<Route path="/about" component={About} />
</Router>,
document.getElementById('app')
);
这篇关于反应路由器链接不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文