【转自阮一峰老师】React Router中IndexRoute组件的用法
来源:互联网 发布:java编程思想第六版 编辑:程序博客网 时间:2024/05/21 10:16
IndexRoute 组件
下面的例子,你会不会觉得有一点问题?
<Router> <Route path="/" component={App}> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route></Router>
上面代码中,访问根路径/
,不会加载任何子组件。也就是说,App
组件的this.props.children
,这时是undefined
。
因此,通常会采用{this.props.children || <Home/>}
这样的写法。这时,Home
明明是Accounts
和Statements
的同级组件,却没有写在Route
中。
IndexRoute
就是解决这个问题,显式指定Home
是根路由的子组件,即指定默认情况下加载的子组件。你可以把IndexRoute
想象成某个路径的index.html
。
<Router> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route></Router>
现在,用户访问/
的时候,加载的组件结构如下。
<App> <Home/></App>
这种组件结构就很清晰了:App
只包含下级组件的共有元素,本身的展示内容则由Home
组件定义。这样有利于代码分离,也有利于使用React Router提供的各种API。
注意,IndexRoute
组件没有路径参数path
。
原文链接:http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu
阅读全文
0 0
- 【转自阮一峰老师】React Router中IndexRoute组件的用法
- 【转自阮一峰老师】React Router中IndexRoute组件的用法
- React Router中pushState的使用方法
- React Router中pushState的使用方法
- Webpack懒加载React Router的页面组件
- React-Native中一些组件的用法(一)
- React-Native中一些组件的用法(二)
- react-router的改变
- 【转】React Native 中组件的生命周期
- react router path 中通配符
- React中组件的生命周期
- React Router v4中component和render的区别
- 关于react-router中<Link>的调试: You should not use <Link> outside a <Router>
- React 组件间通信-props的用法
- react-native播放视频组件 react-native-video的用法
- 由React Router引起的组件重复渲染谈Route的使用姿势
- React实战-React中this的用法
- react-router Switch 组件不能动态更换子路由的问题
- java中Integer.parseInt(),Integer.valueOf(),Integer.getInteger()方法的不同
- 【安全牛学习笔记】Kali实战-Web渗透
- 大神浅谈弹性布局链接~~
- Mysql索引总结
- 深度学习视觉领域常用数据集汇总
- 【转自阮一峰老师】React Router中IndexRoute组件的用法
- 取某个字符串中第n个同样的特殊字符后面的字符串 举例
- train_test_split用法
- 阿里服务器上安装mysql,外网无法连接问题
- Print格式化输出
- vue脚手架使用及问题
- Windows线程池
- 作业6
- Java中的值传递与“引用传递”