React·页面跳转传参
React·页面跳转传参
1、父级App.js 设置好路由地址
//import { HashRouter, Routes, Route } from "react-router-dom"
function App() {
return (
{/* 路由地址设置 */}
<HashRouter>
<Routes>
<Route path="/" element={<AaaDiv></AaaDiv>}></Route>
<Route path="/Bbb" element={<BbbDiv></BbbDiv>}></Route>
{/* 如果采用 params 模式 path="/Bbb:id" 用:打个参数配合*/}
</Routes>
</HashRouter>
)
}带参数跳转
// import { useNavigate } from "react-router-dom"
// 路由跳转
const navigate = useNavigate() //跳转涵
function tapGo() {
console.log("路由跳转")
navigate('/Bbb?id=1001&name=ABC', { replace: true })
}接收参数
// import { useSearchParams } from "react-router-dom"
const [parent] = useSearchParams() //格式固定 数组模式
let id = parent.get('id')//地址 获取传参数
let name = parent.get('name')//地址 获取传参数
console.log('获取传参数:', id, name)二级路由
在标签 <Route path="/"> 嵌套 如果 需要设置二级路由为默认 则 <Route 的 path="/" 改为 index >