react路由插件react-router-dom
的基本使用。
从一个简易的项目配置说起
文件的存放的路径规范
component 文件夹放一些通用的组件,比如页面的头部、尾部等。
pages 文件夹放路由组件(其实也可以这么理解,视图组件。(组件间一般是通过切换路由进行跳转的,所以这里可以可以理解为视图对应到具体的路由组件))
这里注意Home组件的写法,Home下的index.js才是这个组件,而Message,News文件夹则是Home的子代
index.js(Router标签)
在App外侧包裹一个Router:BrowserRouter/HashRouter,保证UI界面和URL同步
1 | import React from 'react'; |
App.js(Router系列标签作用)
Link:本质是a标签的作用,提供一个方便点击的导航。
NavLink:比Link组件多了一个activeClassName
属性,可以定义导航选中(active
)时的样式。
Route:把页面视图和具体的组件对应起来。
Switch:在多个路由有重复部分的时候,只匹配第一个,可以有效避免重复匹配。
Redirect:重定向,当所有路由都不满足匹配规则时,给出对应的页面。如404.
1 | import './App.css'; |
注意这里的这部分代码:
1 | <Switch> |
这一组标签实现的功能,其实类似Vue-router
的<router-view>
参见另一篇文章:「React」封装一个<router-view>
路由组件携带的一些参数
不像普通组件的传值方式:
1 | import Header from './component/Header' |
但对于路由组件,<Route path="/home" component={Home}>
,如果在Home中直接输出this.props
,可以得到一些路由属性:
这里提取一些重要的部分:
1 | history: |
Route
负责当前页面链接的跳转关系,同时还会给跳转到的组件传递一些参数(上面那些),我们接下来在该组件中可以利用传递的这些信息进行下一步操作。比如从上一级传递一个bookID
,在这一级可以通过props
获取到它进行aioxs请求,拿到数据后进行渲染工作。
- 本文链接: https://anyway521.gitee.io/post/a516ecea.html
- 最后更新:
- 版权声明: 博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!