ReactRouter概念

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

1. 单页应用

现代化的应用，因为极致的用户体验，使用户感觉页面体验非常棒。页面响应异常快速 优势: 避免整体页面刷新 用户体验变好

缺点：seo不太友好，由于整个应用只加载一次，所以首屏加载时间较久 但是缺点是可以挽救的，相对优势而言，大多数情况下是影响较小的，只有非常关注seo的网站，才会在这个问题上权衡

2. 路由的本质

概念来源于后端 : 一个路径表示匹配一个服务器资源 /a.html -> a对应的文件资源 /b.html -> b对应的文件资源，所见就是所得，访问的就是资源的路径地址。

共同的思想: 一对一的关系

前端的路由: 一个路径path对应唯一的一个组件comonent 当我们访问一个path 自动把path对应的组件进行渲染，页面初次会将所有模块加载到本地，只是应用中有状态控制页面只显示指定的页面，这个页面和url地址也是一一对应的。

import { BrowserRouter, Route, Routes, Link } from 'react-router-dom'
import Home from './Home'
import About from './About'
import Login from './Login'
function App () {
  return (
    <BrowserRouter>
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
      <Routes>
        <Route path='/' element={<Home></Home>}></Route>
        <Route path='/about' element={<About></About>}></Route>
        <Route path='/login' element={<Login></Login>}></Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App

编程式跳转

react-router-dom 中的hooks useNavigate ,通过这个hooks 获取 nvaigate方法，然后直接调用传入url就可以挑战了

import React from 'react'
import { useNavigate } from 'react-router-dom'
export default function Login() {
  const navigate = useNavigate()
  function goAbout() {
    navigate('/about?id=2323', {
      replace: true,
    })
  }
  return (
    <div>
      Login
      <button onClick={goAbout}>跳转关于</button>
    </div>
  )
}

路由传参

searchParams传参 路由跳转时通过query传参数，可以在函数组件中使用react-router-dom提供的hooks,useSearchParams获取当前的参数 使用方式，就是通过hooks useSearchParams 获取到一个数组，数组第一个参数就是searchParams对象，这个对象有一个get方法。

 const [params] = useSearchParams()
  console.log(params.get('id'))

其原理应该也只是使用了 URLSearchParams 这个对象

var x=new URLSearchParams('?id=2323')
x.get('id')
// '2323'

使用姿势

import React from 'react'
import { useSearchParams } from 'react-router-dom'
export default function About() {
  const [params] = useSearchParams()
  console.log(params.get('id'))
  return <div>About</div>
}