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 >

299 Views

React·路由router (页面跳转)

linwute

留下评论