React学习笔记

React学习笔记

一、路由的基本使用

1. 明确好界面中的导航区、展示区，确定哪些部分需要通过路由组件来展示

2. 导航区的a标签改为Link标签，Link需要从react-router-dom中引入

   <Link to="/lujing">test</Link>

3. 展示区写Route标签进行路径的匹配

   <Route path='/lujing' component={test}/>注意c是小写

4. <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

1. NavLink可以实现路由链接的高亮，被选中者会默认加上active，或通过activeClassName指定样式名
2. 标签体内容是一个特殊的标签属性
3. 通过this.props.children可以获取标签体的内容
4. 封装NavLink，在components中放置自定义组件MyNavLink，标签体内容的获取参考第3小点，通过...展开运算符将this.props展开即可

四、Switch的使用

1. 通常情况下，path和component是一一对应的关系
2. Switch可以提高路由匹配效率（单一匹配）

五、解决多级路径刷新页面样式丢失的问题

1. public/index.html 中 引入样式时不写 ./ 写 / （常用）
2. public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3. 使用HashRouter