ReactJS路由器不路由
努力让React-Router为SPA工作,但我似乎无法让它呈现除App组件之外的任何东西。ReactJS路由器不路由
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';
import Parameter from './components/parameter/Parameter';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container">
<h1>TEST</h1>
<Link to="/parameter">Click Me!</Link>
</div>
)
}
}
class Test extends React.Component {
render() {
return (
<div className="container">
<h1>TEST PAGE</h1>
</div>
)
}
}
var routes = (
<Route name="root" component={App} path="/">
<Route component={Test} path="test" />
<Route component={Parameter} path="parameter" />
</Route>
)
ReactDOM.render((
<Router history={browserHistory} routes={routes} />
), document.getElementById('react'))
你没有指定你想要的嵌套组件的App
组件中呈现。 App
组件的行为类似于所有嵌套路由的布局。
为特定路线命中时,您为嵌套路线指定的组件需要放置在布局/父组件内的位置。
最简单的方法是使用{this.props.children}
App
组件中的某个地方。参考下面的例子。
这里又是你的应用程序组件:
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container">
<h1>TEST</h1>
<Link to="/parameter">Click Me!</Link>
{this.props.children}
</div>
)
}
}
为了更深入的例子,从反应路由器回购指active-links例子。在他们的示例中,您可以看到children
作为App
组件中的道具可用,并且会在命中相关路由时呈现嵌套路由中的任何其他组件。例如,点击/
路由将呈现App
内的Index
组件,其中{children}
被定位,因为存在直接嵌套的路由<IndexRoute ... />
。
React提供this.props.children
作为访问组件子项的方法。它允许您将组件作为数据传递给其他组件。在这种情况下,在App
组件内渲染子组件。
如果您使用的阵营路由器V4,我觉得嵌套组件不渲染的原因是因为你可以在不窝<Route />
小号阵营路由器V4。
我打开了一个问题,在这个早期:
我正在使用React Router 3 – greyfox
什么版本的react-router? –
“react-router”:“^ 3.0.2” – greyfox
您是否尝试为'/ test'和'/ parameter'添加'/'? –