索引 - IndexRoute

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

现在访问首页使用的就是 App 这个组件,在首页上,这个组件里的 this.props.children 其实是没有东西的。我们可以在路由里指定一个默认要显示的东西。 这样当没有要显示的儿子的时候,就会使用这个默认的组件。

先在文件的头部这里,导入一个 IndexRoute .. 这个东西同样是来自 react router , 逗号分隔一下 .. 输入一个 IndexRoute ..

然后在文件的底部这里,这个首页路由的里面,用一个 IndexRoute .. 添加一个 component 属性,设置一下对应的组件 .. 比如用一个 Home ..

再去定义一下这个 Home 组件 .. class Home .. 继承 React Component .. 一个 render 方法 .. 返回一些要显示的东西 … 暂时先添加一行文字 .. 首页内容 ..

现在,如果 App 组件里的 this.props.children 是未定义的时候,就会使用 IndexRoute 里面指定的这个 Home 组件 .. 保存 .. 回到浏览器 … 打开 首页 ...

现在这里显示的就是 Home 组件里面要输出的内容。你可以使用类似的方法去为其它的路由添加默认要显示的组件。

回到编辑器 .. 再给 tv 这个路由添加一个索引 .. IndexRoute .. 添加一个 component 指定一下索引路由.. 设置成 ShowIndex ..

在上面再去定义一个这样的组件 .. class ShowIndex ..继承 React Component ... 一个 render .. return 一些东西 ..

要显示的可以是在 TV 这个组件里的这行文字 ... 剪切一下 ... 再粘贴过来 .. 然后保存 ..

打开 电视 .. 这里显示的这个电视节目列表,是来自 ShowIndex 这个组件 .. 我们可以再打开一个 shows 地址 .. 打开以后,就不会再显示刚才的那个 电视节目列表 了 .. 现在显示的是 Show 这个组件里的东西。

索引 - IndexRoute《 React 路由 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点