React路由

React路由

路由最基本的职责就是当页面的访问地址与Route上的path匹配时，就渲染出对应的UI界面
实现spa应用（单页面应用）：整个项目只有一个完整页面
页面切换不会刷新页面，内容局部更新

路由插件分类

• React-Router：提供了一些router的核心API，包括Router，Route，Switch等，但没有提供DOM操作进行跳转的API
• React-Router-DOM：提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-Router-DOM。

路由分类

• 组件（组件名的首字母要大写）：
  调用组件–<组件 属性=“字符串” 属性={属性的值} />
  （1）无状态组件（函数组件）：

 const 组件的名字=(props)=>{ return jsx表达式 } 
  //props是父子间传值的形参            

（2）类组件：

 class 组件的名字 extends React.Component{   
  render(){ //render函数是在类组件中必不可少的钩子函数
     //类组件中this  常用的属性 state props refs
     //其中state 是组件内部的数据  
     //props 来自组件外部的数据  
     //refs 标识一个组件的节点
  		return jsx表达式      
  		} 
  } 

路由模式

• HashRouter
  url中会有个#，例如localhost:3000/#，HashRouter就会出现这种情况，它是通过hash值来对路由进行控制。如果你使用HashRouter，你的路由就会默认有这个#。

• BrowserRouter
  很多情况下我们则不是这种情况，我们不需要这个#，因为它看起来很怪，这时我们就需要用到BrowserRouter。

link-NavLink

• Link 主要API是to，to可以接受string或者一个object，来控制url。

• NavLink 它可以为当前选中的路由设置类名、样式以及回调函数等

• to属性跳转路径activeClassName当元素处于活动状态时应用于元素的样式

重定向

导入Redirect
import { BrowserRouter,Route,Link,NavLink,Redirect } from ‘react-router-dom’
定义重定向路径

exact属性

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

Switch

为了解决route的唯一渲染，它是为了保证路由只渲染一个路径。
是唯一的，因为它仅仅只会渲染一个路径，当它匹配完一个路径后，就会停止渲染了。

只会匹配一个

二级路由

在子页面中引用路由模块

import { BrowserRouter, Route,Link} from 'react-router-dom';

设置相关规则

class A extends React.Component{
    render(){
        return (       
        

            home
            about
            topics
         
            
            
            
            
         
    
        )
    }
}

路由传参

params方式

• 在Router标签后拼接传递参数的名字

• 设置发送的数据

home

this.props.history.push("/home/我是push发送的数据")}>点我去home

• 在需要接收的路由组件中接收this.props.match.params.xxx

优点：刷新地址栏，参数依然存在
缺点：只能传字符串，且传值太多的话，url会变得常而丑陋

query方式

• 在Link中设置发送的数据

点我去d

• 在需要接收的路由组件中接收
  this.props.location.query.xxx

优点：传参优雅，传递参数可传对象
缺点：刷新地址栏，参数丢失

state方式

• 在Link中设置发送的数据

点我去d

• 在需要接收的路由组件中接收
  this.props.location.state.xxx

优点：传参优雅，传递参数可传对象
缺点：刷新地址栏，参数丢失