react中的push和replace跳转

push路由跳转是可以跳转到上一级,可以返回的

replace路由跳转是不能返回上一层的

import {NavLink,Routes,Route}  from 'react-router-dom'
<NavLink to='/about'>about</NavLink>
<NavLink to='/Home'>Home</NavLink>
<Routes>
    caseSensitive是否区分大小写默认不区分不写
<Route path='/about' caseSensitive  element={<About/>}></Route>
<Route path='/Home'  element={<Home/>}></Route>
重定向  replace跳转模式默认push
 <Route path='/' replace element={<Navigate to='/about'/>}></Route>
</Routes>
控制点击高亮
<NavLink className={({isActive})=>{return isActive?'www':'eee'}} to='/about'>about</NavLink>

路由表

import { NavLink,  Navigate,useRoutes} from 'react-router-dom'
import routes from './routes'
export default function App() {
  const element=useRoutes(routes)
  return (
    <div>
      <NavLink className={({isActive})=>{return isActive?'www':'eee'}} to='/about'>about</NavLink>
      <NavLink to='/home'>Home</NavLink>
      {element}
    </div>
  )
}

import About from '../page/about'
import Home from '../page/home'
import {  Navigate} from 'react-router-dom'
export default [
    {
      path:'/about',
      element:<About />
    },
    {
      path:'/home',
      element:<Home />
    },
    {
      path:'/',
      element:<Navigate to='/about'/>
    }
  ]

二级路由

二级页面写法
import React from 'react'
import { NavLink, Outlet} from 'react-router-dom'
export default function home() {
  return (
    <div>
       <NavLink className={({isActive})=>{return isActive?'www':'eee'}} to='new'>NEW</NavLink>
       <NavLink className={({isActive})=>{return isActive?'www':'eee'}} to='message'>MESSAGE</NavLink>
        <Outlet></Outlet>    
    </div>
  )
}

import About from '../page/about'
import Home from '../page/home'
import New from '../page/zi/new'
import Message from '../page/zi/message'
import {  Navigate} from 'react-router-dom'
export default [
    {
      path:'/about',
      element:<About />,
    },
    {
      path:'/home',
      element:<Home />,
      children:[
        {
            path:'new',
            element:<New />
          },
        {
            path:'message',
            element:<Message />
          },
      ]
    },
    {
      path:'/',
      element:<Navigate to='/about'/>
    }
  ]

路由的params参数

  {
            path:'new/:id/:title',
            element:<New />
   },
<NavLink className={({isActive})=>{return isActive?'www':'eee'}} to='new/13/19'>NEW</NavLink>

获取params参数
import {useParams} from 'react-router-dom'
let a=useParams()
let {id,title}=useParams()

获取params参数
import {useMatch} from 'react-router-dom'
let a=useMatch('home/new/id/title')

路由的search参数

import React from 'react'
import { NavLink, Outlet} from 'react-router-dom'
export default function home() {
  return (
    <div>
       <NavLink className={({isActive})=>{return isActive?'www':'eee'}} to='new?id=123&title=456'>NEW</NavLink>
       <NavLink className={({isActive})=>{return isActive?'www':'eee'}} to='message'>MESSAGE</NavLink>
        <Outlet></Outlet>    
    </div>
  )
}

import React from 'react'
import {useSearchParams} from 'react-router-dom'
export default function New(props) {
    let [search,setSearch]=useSearchParams()
    get方法获取
    console.log(search.get('id'));
    setSearch是修改传递参数方法
  return (
    <div>
      <button onClick={()=>{setSearch('id=186&title=789')}}></button>
    </div>
  )
}

state参数

import React from 'react'
import { NavLink, Outlet} from 'react-router-dom'
export default function home() {
  return (
    <div>
       <NavLink className={({isActive})=>{return isActive?'www':'eee'}} to='new' state={{
         id:10086,
         title:789
       }}>NEW</NavLink>
       <NavLink className={({isActive})=>{return isActive?'www':'eee'}} to='message'>MESSAGE</NavLink>
<Outlet></Outlet>    
    </div>
  )
}

import React from 'react'
import {useLocation} from 'react-router-dom'
export default function New(props) {
    let {state}=useLocation()
    console.log(state);
  
  return (
    <div>
      <button >46</button>
    </div>
  )
}

编程式

只能传递state参数
import React from 'react'
import {  NavLink, Outlet,useNavigate} from 'react-router-dom'
export default function Home() {
  const navigate=useNavigate()
  function showNavigates(){
    navigate('new',{
      replace:false,
      state:{
         id:13,
         title:852
      }
    })
  }
  return (
    <div>
       <button onClick={()=>{showNavigates()}}>new</button>
       <NavLink className={({isActive})=>{return isActive?'www':'eee'}} to='message'>MESSAGE</NavLink>
        <Outlet></Outlet>    
    </div>
  )
}

useInRouterContext

判断组件是否处在路由上下文环境中  返回值布尔值
被BrowserRouter包裹
console.log(useInRouterContext())
你是第三方组件封装者需要判断是否在路由环境中

useNavigationType

作用:返回当前的导航类型(用户是如何来到当前页面的)
返回值: pop    指在浏览器中直接打开了这个路由组件(刷新页面)
      push replace

useOutlet

用来呈现当前组件中渲染的嵌套路由
如果嵌套路由没有挂载则是null
如果已经挂载则展示嵌套的路由对象
 const result = useOutlet()
  console.log(result)

useResolvedPath

给定一个URL值 解析其中的 path search hash值
useResolvedPath('/new?id=123&title=789#qwe')
URL值随便写
hash: "#qwe"
pathname: "/new"
search: "?id=123&title=789"
[[Prototype]]: Object