浅析react |
您所在的位置：网站首页 › react路由表 › 浅析react |
浅析react
什么是路由？ 单页应用（英语：single-page application，缩写SPA）是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断[用户体验]，使应用程序更像一个桌面应用程序路由是 根据不同的 url 地址 展示 不同的内容或页面。一个针对 React 而设计的路由解决方案、可以友好的帮你解决 React components 到 URl 之间的同步映射关系前端老兵，公众号：前端爱好者react-router 学习总结 路由V6使用路由方法导入import React, { Component } from 'react';
import {HashRouter, Routes ,Route} from 'react-router-dom'路由V6跳转方式Link、NavLink声明式导航 isActive ? "selected" : ""}>HOME isActive ? "selected" : ""}>ABOUTnavigate() 路由跳转编程式导航 导入一个 useNavigate钩子函数执行 useNavigate 函数得到 跳转函数在事件中执行跳转函数完成路由跳转import React from "react"; import { Route, Routes, useNavigate } from "react-router-dom"; function App() { const navigate = useNavigate(); return ( {/* 编程式导航导航 */} { navigate("/child1"); }} > onClick: go to child1 ); } export default App;路由V6传参场景：跳转路由的同时，有时候要需要传递参数 由于v6把旧版本中的路由组件能收到的三个参数(Location，history，match) 移除了， 所以 不能直接使用this.props.location.pathname 获取到当前路由。而且 withRouter也移除 了。 那么如何传参呢？请往下看: searchParams 传参查询字符串传参的方式比较简单，参数的形式以 问号拼接 到地址后面 路由传参 import { useNavigate } from 'react-router-dom' const Login = () => { const navigate = useNavigate() return ( navigate('/about?id=1001')}>go index ) } export default Login路由取参 import { useSearchParams } from 'react-router-dom' const About = () => { const [params] = useSearchParams() let id = params.get('id') return this is about {id} } export default Aboutparams 传参params 方式传参要求会多一些，需要我们在路由表配置的位置添加一个 参数占位。 路由表配置的位置添加参数占位 const router = createBrowserRouter([ { path: '/about/:id', // 注意这里 element: , }, ]) export default router路由传参 import { useNavigate } from 'react-router-dom' const Login = () => { const navigate = useNavigate() return ( navigate('/about/1001')}>go index ) } export default Login路由取参 import { useParams } from 'react-router-dom' const About = () => { const params = useParams() let id = params.id return this is about {id} } export default About总结路由跳转方式Link、NavLink navigate() 路由跳转 onClick={() => { navigate("/child1"); }}路由传参searchParams 传参 -- useSearchParamsparams 传参 -- useParams参考文档： react router v6 中文文档: http://www.reactrouter.cn/https://mp.weixin.qq.com/s?__biz=MzIxMjAzNDUzOQ==&mid=2454693207&idx=1&sn=d0bedb74db993d84a2ad102cbb5f6689&chksm=80f733d3b780bac5047b45297cb23247bb7bcaa87e03961588bf5fca49cff6649a2b88480d37&token=1129492451&lang=zh_CN&scene=21#wechat_redirect
|
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |