1. 前言
- 以前的文章路由都是
5x路由配置- 接着6.x 嵌套路由-404配置-2
2. 效果演示
- 效果图
演示.gif- 下述逻辑按这个来实现
3. 动态路由配置
- 把之前的
我的/my界面里边 修改为二级路由,用来玩传参- 动态路由还是:绑定
- 直接上相关代码,引入相关的代码就不贴了
// 用来作为 404 页面的组件 const NotFound = () => { return <div>一朝一夕日复日，半醉半醒浮生梦</div>; }; // 默认视图 演示 const DefaultView = () => { return (<div> <h3>请选择一个学生</h3> <NavLink to="/my/1">白金卡</NavLink> | <NavLink to="/my/2?name=zhangsan&cardNum=123456#bo">铂金卡|</NavLink> <NavLink to="/my/4" state={{ name: "李四", cardNum: 987654 }}> 永久黑卡 </NavLink> </div>) }; export default function () { return ( <Routes> {/* 其他代码和之前一样 */} <Route path="my" element={<MyPage />}> {/* index 默认显示*/} <Route index element={<DefaultView />}></Route> {/* 动态参数 :属性 */} <Route path=":id" element={<MyCard />}></Route> </Route> <Route path="*" element={<NotFound />} /> </Routes> ); }
- 动态路由一般其实也都算是
params传参,直接拼在路径后面的,所以套路都差不多- 子路由配置
index,就是默认显示 效果和path=""一样DefaultView是为了演示方便,没有单独写成一个页面组件
4. 路由出口
- 子路由的出口在父路由,所以代码写到
my里面NavLink相当于vue的router-link- Outlet 是 子路由的
出口组件哦
import { NavLink, Outlet } from "react-router-dom"; export default function index() { return ( <div> <h1>我的</h1> <Outlet></Outlet> </div> ); }
5. 接收parmas动态参数的 问题
- 这里的
MyCard子路由接收参数的页面使用了函数式组件,先不要用类组件,后边说原因- 路由没有传值--证据
有图为证.png- 打印 props是空的,路由参数并没有自动注入到类组件中
6. 页面接收路由参数 的 配置
- 没有自动注入那我们就手动注入,以前
5x路由自动注入其实使用了高阶函数,高阶组件withRouter方法withRouter本质上就是一个组件，它的特点：它的参数是一个组件，它的返回值是一个新组件。- 我们称这样的组件是HOC(High Order Component高阶组件)，
高阶组件本质上就是一个闭包的应用- 了解咋实现的 ,现在我们自己个就行
import { useParams, useLocation, useNavigate, useSearchParams, } from "react-router-dom"; function withRouter(Component) { // 相当于给 MyCard组件添加各种props属性，还添加三个重要的属性params,location,navigate return (props) => ( <Component {...props} searchParams={useSearchParams()} params={useParams()} location={useLocation()} navigate={useNavigate()} /> ); } // withRouter(MyCard)让当前组件MyCard可以访问路由信息。 // export default MyCard export default withRouter(MyCard);
- {...props}原来的属性不变
- useXXX开头的一般就是用到了hook,所以,这里我们只能用函数式组件来写页面
- useParams()返回是
动态参数对象- useLocation()返回本地
url信息对象，pathname, hash, search(查询字符串),state携带的数据- useSearchParams()专门用来获取
查询字符串参数。返回一个数组，第一个项用来获取值，第二个项是函数，用来修改值。- 把路由信息注入到当前组件
export default withRouter(MyCard);
7. 动态参数的获取
- 来个图看打印参数的变化
参数.png- 回顾下跳转路由传参
<NavLink to="/my/1">白金卡</NavLink> |
- params 传参接收
let { id } = props.params;
- 展示
<h1> 我的卡包---id: {id} <button onClick={goHome}>跳转到主页</button> <button onClick={goState}> state传参</button> </h1>
8. query传参
- 就是拼接在url?的后面
- 回顾下 传参
<NavLink to="/my/2?name=zhangsan&cardNum=123456#bo">铂金卡|</NavLink>
- 接收 searchParams.get()
// ? 后面 let [searchParams] = props.searchParams; console.log("searchParams", searchParams); let queryName = searchParams.get("name"); let queryCardNum = searchParams.get("cardNum");
- 展示
<h1>query? 传参</h1> <h3>姓名:{queryName} --卡号: {queryCardNum</h3>
- searchParams打印
searchParams.png
9. state传参
9.1 传参方式
- 链接跳转
<NavLink to="/my/4" state={{ name: "李四", cardNum: 987654 }}> 永久黑卡 </NavLink>
- 编程式导航
const goState = () => { props.navigate("/my/3", { state: { name: "李四", cardNum: 1799798 } }); };
- 指定界面跳转 props.navigate("/my/4");
- 主页跳转 props.navigate("/");
9.2 接收接收参数
// state const stateParmas = useLocation(); console.log("state:", stateParmas); // 正常情况下直接这样写就行 //let {cardNum,name} = stateParmas.state // 我这里是因为三种传参都在一个界面,前2种没有传state, 这里会报错,所以做了错误处理 let {cardNum,name} = stateParmas.state ? stateParmas.state : { name:'无名氏' , cardNum: "没有传卡号"}
9.3 展示数据
<h1>state 传参</h1> <h3>姓名:{ name} --卡号: { cardNum}</h3> <hr />
