react-reactHook-路由-路由props

reactHook:

usestate使用状态state模拟class组件的state

useEffect使用副作用（模拟生命周期）

useRef引用dom

useCallback 使用回调缓存 执行一个函数

useMemo使用缓存 返回一个函数

useLayoutEffect 视图发生变化

useReducer 集中数据管理器 （模拟reduce）

useContext 使用上下文（跨层级传参）
createContext 创建上下文

useState使用状态

const  [num,setNum] = useState(10)

useEffect 模拟生命周期

第一个参数回调函数：模拟组件已经挂载完毕，组件更新完毕

第一个参数的返回值：模拟组件将要卸载

第二参数：依赖数据

路由

BrowserRouter 浏览器路由
HashRouter 哈希路由

 NavLink 导航链接

        exact精确匹配

        to 链接地址

        class="active" 匹配状态

Route 路由容器

        exact精确匹配（路径和配置的path完全匹配）

        path 路由地址

        component 组件

<Redirect> 重定向

        to 去哪

        from 从哪

 <Switch> 匹配一个路由

 <Prompt>路由离开调用弹框

        when 当条件为真

        message 弹出文本内容

 <Link>跳转

        to=“/home”

        to={{
pathname:"/login",
search:"name=mumu&age=18",
hash:"#good",
state:{redirect:"xxx"}
}}

        参数 props里面的location一致的

 404

1. Switch 包裹（一次匹配一个）

2. path=“*”

3. 配置放在最后面

 路由的参数

path="produce/:id”

切换 to=“/produce/abc”

获取：props.match.params.id

 子路由

在主路由添加
  <div>
          <Route path="/admin/dash" component={Dash}></Route>
          <Route path="/admin/orderlist" component={OrderList}></Route>
          {/* 重定向 */}
          <Redirect path="/admin" to="/admin/dash"></Redirect>
       </div>

 路由props

match 匹配的路由

        params 路由的参数

        isExact是否精确匹配

        path路径

        url 地址

 history历史记录

        push 跳转

        replace 替换历史记录
        go跳转历史记录
        goBack 返回
        goForward 前进 
        linsten 监听
        location 同 location
        length 长度

 location 地址栏信息

        hash哈希值
        pathname地址名称
        search 查询信息
        state跳转传入数据

只有 Route 对应的component才有这三个自动注入参数