So verwenden Sie useNavigate, um Routen zu überspringen, Parameter zu übergeben und Parameter abzurufen.

---

Vorwort

In diesem Artikel wird hauptsächlich beschrieben, wie Parameter über useNavigate übertragen und in entsprechenden Komponenten empfangen werden.

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. So führen Sie Such-, Parameter- und Statusparameter durch

import React, { memo } from 'react'
import { useNavigate } from 'react-router-dom'
const Home = memo(() => {
  const navigate=useNavigate()
 const  goDetail = () => {
    navigate('/Detail?name=tom&age=18')
  }
  const goAbout = () => {
    navigate('/About/jack')
  }
  const goshop = () => {
    navigate('/Detail/Shop', { state: {name:'tom',age:"20"} })
  }
  return (
    <div>
      <button onClick={goDetail}>点我去Detail页面并且传递search参数</button>
      <button onClick={goAbout}>点我去About页面并且传递params参数</button>
      <button onClick={goshop}>点我去shop页面并且传递state参数</button>
    </div>
  )
})

export default Home

2. Schreiben Sie die entsprechenden Routing-Regeln

import { useRoutes,Navigate } from "react-router-dom";
import Home from "../pages/Home";
import Detail from "../pages/Detail";
import About from "../pages/About";
import Shop from "../pages/Shop";

import React, { memo } from 'react'
const DefineRoutes = memo(() => {
const routes= useRoutes(
    [
      {
        path: '/Home',
        element:<Home></Home>
      },
      {
        path: '/Detail',
        element: <Detail></Detail>,
        children: [
          {
            path: 'Shop',
            element:<Shop></Shop>
          }
        ]
      },
      {
        path: '/About/:name',
        element:<About></About>
      },
      {
        path: '/',
        element:<Navigate to='/Home'></Navigate>
    }
    ]
  )
  return routes
})

export default DefineRoutes 

Drittens importieren Sie die Anwendung in die App

import React, { memo } from 'react'
import DefineRoutes from './router'
const App = memo(() => {
  return (
    <div>
      <DefineRoutes></DefineRoutes>
    </div>
  )
})

export default App

Stellen Sie sicher, dass Sie eine Routerschicht außerhalb der App-Komponente einschließen, z. B. BrowerRouter

Viertens erhalten Sie unterschiedliche Parameter in verschiedenen Komponenten

Rufen Sie den Params-Parameter mit useParams ab

import React, { memo } from 'react'
import { useParams } from 'react-router-dom'

const About = memo(() => {
  console.log(useParams())
  return (
    <div>About</div>
  )
})

export default About

Rufen Sie Suchparameter mit useSearchParams ab

import React, { memo } from 'react'
import {Outlet, useSearchParams } from 'react-router-dom'


const Detail = memo(() => {
 const [search,setsearch] = useSearchParams()
  console.log(search.get('name'))
  console.log(search.get('age'))
  return (
    <div>Detail
      <h1>我是Detail的子组件</h1>
      <Outlet></Outlet>
    </div>
  )
})

export default Detail

Verwenden Sie useLocation, um Suchparameter abzurufen

import React, { memo } from 'react'
import { useLocation } from 'react-router-dom'

const Shop = memo(() => {
  const state = useLocation()
  console.log(state)
  return (
    <div>Shop</div>
  )
})

export default Shop

Zusammenfassen

Sie müssen auf die Parameter achten, die von verschiedenen Routen übergeben werden. Unabhängig davon, ob Sie sie bei der Registrierung von Routen erhalten möchten, müssen Sie den entsprechenden Hook verwenden, um die entsprechenden Parameter zu empfangen.