我正在尝试包装我的路线,以便我可以在每条路线上渲染某些内容,例如标题或任何静态内容。我在这里看过这篇文章: Nested Routes in React Router v4
我尝试将路线包裹起来,就像他们在那里一样,但现在唯一显示的是包装组件,没有一个孩子显示。
所以唯一显示的是/
和/dashboard
路线:
Home Component
Dashboard
以下是代码:
包装路线:
<Home>
<Switch>
<Route path="/dashboard" component={Layout} />
<Route component={NotFound} />
</Switch>
</Home>
主页组件:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Home component</h2>
<Link to="/dashboard">Dashboard</Link>
</div>
);
}
}
export default Home;
布局组件:
import React, { Component } from 'react';
class Layout extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Layout Component</h2>
<h2>Layout Component</h2>
</div>
);
}
}
export default Layout;
答案 0 :(得分:1)
您的布局需要一个组件或指令来了解如何渲染子项。
否则路由器不知道儿童路线需要出现在哪里。子组件作为名为children的属性传递给布局。您需要将其添加到希望显示的位置:
{props.children}
喜欢:
import React, { Component } from 'react';
class Layout extends Component {
constructor(props) {
super(props);
}
static propTypes = {
children: PropTypes.node.isRequired,
}
render() {
return (
<div>
<h2>Layout Component</h2>
{props.children}
</div>
);
}
}
export default Layout;
我个人更喜欢使用。 react router config但是如果你使用应该这样做的裸路由器。
答案 1 :(得分:1)
您是否尝试将{this.props.children}
放入主页组件?
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Home component</h2>
<Link to="/dashboard">Dashboard</Link>
{this.props.children}
</div>
);
}
}
export default Home;