React学习笔记
一、路由的基本使用
-
明确好界面中的导航区、展示区,确定哪些部分需要通过路由组件来展示
-
导航区的a标签改为Link标签,Link需要从
react-router-dom
中引入<Link to="/lujing">test</Link>
-
展示区写Route标签进行路径的匹配
<Route path='/lujing' component={test}/>
注意c是小写 -
<APP>
被<BrowserRouter>
或<HashRouter>
包裹
二、路由组件与一般组件
他们的区别如下:
区别 | 一般组件 | 路由组件 |
---|---|---|
写法 | <Demo/> | <Route path="/demo" component={demo}/> |
存放文件夹位置 | components | pages |
接收到的props | 写标签时传递了什么就能接收到什么 | 固定属性:history、location、match |
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"
三、NavLink
与封装NavLink
NavLink
可以实现路由链接的高亮,被选中者会默认加上active,或通过activeClassName
指定样式名- 标签体内容是一个特殊的标签属性
- 通过
this.props.children
可以获取标签体的内容 - 封装
NavLink
,在components
中放置自定义组件MyNavLink
,标签体内容的获取参考第3小点,通过...
展开运算符将this.props
展开即可
四、Switch的使用
- 通常情况下,path和component是一一对应的关系
- Switch可以提高路由匹配效率(单一匹配)
五、解决多级路径刷新页面样式丢失的问题
- public/index.html 中 引入样式时不写 ./ 写 / (常用)
- public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (常用)
- 使用HashRouter