React学习路上的绊脚石Router

Router

• react-router：核心库
• react-router-dom：路由的软件包
• react-router-nattive：用于开发RN应用的绑定

React-router-dom

• HashRouter：http://xxx.com/#/about
• BrowserRouter：使用H5的历史API来跟踪React应用的路由历史记录,形如http://xxx.com/about
• Routes：Switch组件的升级版，包括相对路由和链接、自动路由排名、嵌套路由和布局等功能。
• Route：负责渲染React组件的UI。有一个path属性和compoent属性
• Link组件：
• useParams：

params传参

优点：刷新页面，参数不丢失

缺点：

• 1.只能传字符串，传值过多url会变得很长

• 2. 参数必须在路由上配置

路由配置  
  { path: '/detail/:id/:name', component: Detail }

路由跳转和获取路由参数
import { useHistory,useParams } from 'react-router-dom';
const history = useHistory();
// 跳转路由   地址栏：/detail/2/zora
history.push('/detail/2/zora')
// 获取路由参数
const params = useParams()  
console.log(params) // {id: "2",name:"zora"}

Search传参

优点：刷新页面，参数不丢失

缺点：只能传字符串，传值过多url会变得很长，获取参数需要自定义hooks

路由配置  
 { path: '/detail/:id/:name', component: Detail }

路由跳转和获取路由参数	
import { useHistory } from 'react-router-dom';
const history = useHistory();
// 路由跳转  地址栏：/detail?id=2
history.push('/detail?id=2')  
// 或者
history.push({pathname:'/detail',search:'?id=2'})

/**
* 自定义hooks用于获取路由参数
* IE11及以下浏览器 不支持浏览器内置的URLSearchParams API
**/
function useQuery() {
  return new URLSearchParams(useLocation().search);
}
const query = useQuery()
const id = query.get('id') //2

/**
    自定义hooks
*/
import { useLocation } from 'react-router-dom';
import qs from 'query-string';

export function useQuery<T = any>(): T {
  const { search } = useLocation();
  return (qs.parse(search) as unknown) as T;
}
const query = useQuery<IRouteQuery>();
const {id} = query

State传参

优点：可以传对象

缺点： <HashRouter>刷新页面，参数丢失

路由配置 
  { path: '/detail', component: Detail }
	
路由跳转与获取路由参数
import { useHistory,useLocation } from 'react-router-dom';
const history = useHistory();
const item = {id:1,name:"zora"}
// 路由跳转
history.push(`/user/role/detail`, { id: item });
// 参数获取
const {state} = useLocation()
console.log(state)  // {id:1,name:"zora"}