React·路由router (页面跳转)
React·路由router
1】安装路由 npm add react-router-dom
2】导入路由
import { BrowserRouter, Link, Routes, Route } from "react-router-dom"
3】使用路由
<BrowserRouter> <Link to='/'> 标签跳转 Aaa页路由 </Link> <Link to='/Bbb'>标签跳转 Bbb页路由 </Link> <Routes> <Route path="/" element={<AaaDiv></AaaDiv>}></Route> <Route path="/Bbb" element={<BbbDiv></BbbDiv>}></Route> </Routes> </BrowserRouter>
4】哈希路由 HashRouter
哈希路由使浏览器地址带#,刷新地址不跳转
import { HashRouter, Link, Routes, Route } from "react-router-dom" //导入路由 //App.js function App() {}里设置 <HashRouter> <Link to='/'> 标签跳转 Aaa页路由 </Link> <Link to='/Bbb'> 标签跳转 Bbb页路由 </Link> {/* 路由地址设置 */} <Routes> <Route path="/" element={<AaaDiv></AaaDiv>}></Route> <Route path="/Bbb" element={<BbbDiv></BbbDiv>}></Route> </Routes> </HashRouter>
5】api方式跳转
const navigate = useNavigate() function goAaa() { // navigate('/Bbb') navigate('/Bbb', { replace: true }) //replace禁止返回 }
6】传参数 接参数
父级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> </Routes> {/* 如果采用 params 模式 path="/Bbb:id" 用:打个参数配合*/} </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 >
489 Views