第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

【學習打卡】第8天 實戰(zhàn)旅游項目

標簽:
Html5

学习打卡】第8天 实战旅游项目

课程名称:[React 17/18 系统精讲 结合TS打造旅游电商平台]

课程章节: 主页开发及路由

主讲老师:阿莱克斯

课程内容:

  1. 配置react-router
  2. 基础路由及页面导航
  3. useNavigate()钩子与Link组件-

课程收获:

routet-router 封装原生JS的路由库
主要分别为
  • react-router-dom 用于浏览器,处理web app的路由

    • 实现H5API切换
    • 利用HASH进行路由切换
  • react-router-native 用于React Native 处理手机APP的路由

  • react-router-redux 路由中间件,处理redux集成

  • react-router-config 配置静态路由

建立 login register detail 文件夹 在detail文件中获取路由参数
import React from "react";
import { useParams } from "react-router-dom";
import styles from "./Register.module.scss";
export const Detail: React.FC = () => {
  // 使用该钩子函数获取路由传递过来的参数
  const params = useParams();
  return (
    <>
      <h1>ID: {params.ID}</h1>
    </>
  );
};
利用TS对传入的参数加上类型 并进行智能提示
// 为传递的参数加上类型
type MatchParams = {
  ID?: string;
};
export const Detail: React.FC = () => {
  // 使用该钩子函数获取路由传递过来的参数
  const params = useParams<MatchParams>();
为未找到的路由配置404页面
          {/*配置404页面*/}
          <Route
            element={
              <h1 style={{ textAlign: "center", fontSize: 30 }}>
                404 页面不存在
              </h1>
            }
            path="*"
          ></Route>
react-router 如何传递路由信息
  1. v5:props 注入获取路由状态

    • class: withRouter
    • fc: useLocation useHistory

    v6: 大改革 全面倒向 fc: useLocation useNavigate

    • const navigate = useNavigate()
      	      <Button onClick={()=>navigate('/register')}>注册</Button>
                <Button onClick={()=>navigate('/login')}>登陆</Button>
      const location = useLocation()
      const params = useParams()
      
  2. 使用Link组件跳转带参 优化体验

     <Link to={`detail/${id}`}>
    

    图片描述

點擊查看更多內(nèi)容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消