React-路由基础

知识点

1. 使用swiper来了解React项目中的第三方实例化

   • 其他第三方库也是一样的道理 echarts

2. react路由 【 王者 】

   • 路由 - 》 实现单页面应用（ SPA single page application ）
   • React router 市面上版本
     • React router 3.x
     • React router 4.x [ 5.x ]
       • 不同之处： React router 3.x 是使用传统思想，统一配置路由,而4.x则不是统一配置了，它认为一切皆组件，也就是路由配置也是组件

React 路由 - 4.x [ 5 ]

# 路由基础

## React路由基础

- 安装  react-router-dom

- `$ yarn add react-router-dom`

- Route  这里是路由配置组件  是一个路由展示组件，通过component属性来确定渲染哪一个组件

  - path
  - component
    - 组件
    - 函数
  - exact 路径完全匹配          /   /home            /home
  - render： 返回一个jsx结构
    - 组件
    - 函数
  - render 和 component的区别
    - render对应的组件是没有路由属性的，而component对应的组件是有的

- Switch

  - 一次只渲染一个组件
  - 可以实现类似按需加载组件的作用，可以起到一定的性能优化作用

- Redirect 重定向组件 

  - from        当前路径

  - to              目标路径 

  - exact  属性

    ```js
    <Route path='/' component={Home} />
    <Route path='/page' component={Page}>
    //这种情况下，如果匹配路由path='/page'，那么会把Home也会展示出来。
    ```

    - 关于Route的exact,加上exact代表当前路由path的路径采用精确匹配，
    - 比如说Home的path如果不加上exact,那么path="/about"将会匹配他自己与path="/“这两个，所以一般path=”/"这个路由一般会加上exact，
    - **另外需要注意一点的是嵌套路由不要加exact属性，如果父级路由加上，那么他下面的子路由将不会生效，因为外层强制匹配了。**

  

- NavLink

  -   NavLink  可以做激活的路由连接 

  ```js
  <NavLink to = "/home"> //to 跳转属性
  </NavLink>

• Link

Link 和 NavLink 区别是NavLink 可以做激活，但是Link不能做路由激活

HashRouter BrowserRouter 路由实现方式

1. HashRouter #/home hashchange事件 兼容高
2. BrowserRouter /home h5 popchange事件 兼容低

/* 
  react-router 5提供了两种路由形式 HashRouter  BrowserRouter
  ! HashRouter     #/home  hashchange事件       兼容高
  ! BrowserRouter  /home   h5 popchange事件     兼容低
*/
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
  <Router>
    <App />
  </Router>
  , document.getElementById('root'));
serviceWorker.unregister();

React 二级路由如何实现？

• 在你的以及路由对应的组件中写入导航和路由展示区域就行了

   <MineContainer>
      Mine
      {/* login/register导航 */}
  
      <NavLink to = "/mine/login"> 登录 </NavLink>
      <NavLink to = "/mine/register"> 注册 </NavLink>
  
  
      {/* login/register 展示区域 */}
      <Route path = "/mine/login" component = { Login } />
      <Route path = "/mine/register" component = { Register } />
  </MineContainer>
  

• Switch的作用是可以延续到二级路由中的

编程式导航

使用js来跳转页面

• push

• replace

• 问题： 当我们在tab组件中想要使用路由属性push和replace时，我们发现Tab组件没有，因为它没有被Route使用，所以它不是路由组件

• 解决： 使用高阶组件withRouter，它可以将一个非路由组件转成伪路由组件，让它具备路由属性

  import { withRouter } from 'react-router-dom'//通过react-router-dom引入withRouter高阶组件
  
  function App( props ) {
    return (
      <div className="App">
        <LayOut { ...props }/>
      </div>
    );
  }
  
  export default withRouter(App); //导出的时候用高阶组件导出app 那么 app下面的子级就有了路由属性
  
  

常规跳转

• go

• goBack

• 问题： 发现只有使用了Route的组件身上才有路由属性、

  • history
  • location
  • match
  • 具有以上属性的组件我们称之为路由组件

动态路由

​ <Route path = “/list” component = { List }/>

​ <Route path = “/list/:id” component = { List }/>

以上两个形式都可以，但是如果写了/:id之后，路径必须全跟

//两种写法 
{
   id: 6,
  //  path: '/list/:id',  	/list/001?a=1&b=2 
   path: '/list',  //  		/list?a=1&b=2
   component: List
 },

举例： http://localhost:3000/list/001?a=1&b=2

• 路由传参

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true } //这里面可以传数据 给要跳转的页面
  }}
/>

• 路由接参

• 案例： 分类/列表/详情

  • 1. 配置组件库
       • ant design 蚂蚁金服团队做的组件库 https://ant.design/index-cn
       • pc端： React后台管理系统
       • 移动端： React类型项目

  • 2. 反向代理

       • src/setupProxy.js文件

         const proxy = require( 'http-proxy-middleware' )
         
         module.exports = function ( app ) {
           // app.use( proxy(标识符,options) )
           // http://m.maoyan.com/ajax/movieOnInfoList?token=
           app.use( proxy('/ajax',{
             target: 'http://m.maoyan.com',
             changeOrigin: true
           }))
         
         
           // app.use( proxy() )
         
         }
         

       • 通过第三方模块 http-proxy-middleware来进行跨域

       • 易错点： setupProxy.js文件存放目录