安装react-router包

如果使用 npm 的话则是

npm install react-router-dom@6

yarn 安装

yarn add react-router-dom@6

基础使用

1、页面跳转实例代码

这样就可以通过点击不同按钮来切换不同组件内容的显示

// 引入必要的内置组件
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

// 准备俩个路由组件

const Home = () => <div>home</div>
const About = () => <div>this is about</div>

function App() {
  return (
    <div className="App">
      {/* 按照规则配置路由 */}
      <BrowserRouter>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

2、核心内置组件说明

1. BrowerRouter
   作用: 包裹整个应用，一个React应用只需要使用一次
2. Link
   作用: 用于指定导航链接，完成声明式的路由跳转

<Link to="/">首页</Link>

这里to属性用于指定路由地址，表示要跳转到哪里去，Link组件最终会被渲染为原生的a链接
3. Routes

作用: 提供一个路由出口，组件内部会存在多个内置的Route组件，满足条件的路由会被渲染到组件内部

       <Routes>
         <Route path="/" element={<Home />}></Route>
       </Routes>

4. Route

作用: 用于定义路由路径和渲染组件的对应关系

         <Route path="/" element={<Home />}></Route>

其中path属性用来指定匹配的路径地址，element属性指定要渲染的组件，图中配置的意思为: 当url上访问的地址为 /about 时，当前路由发生匹配，对应的About组件渲染

useNavigate页面跳转与

useNavigate页面跳转

1、导入一个 useNavigate 钩子函数
2、执行 useNavigate 函数 得到 跳转函数
3、在事件中执行跳转函数完成路由跳转

// 导入useNavigate函数
import { useNavigate } from 'react-router-dom'
const Home = () => {
 // 执行函数
 const navigate = useNavigate()
 return (
   <div>
     Home
     <button onClick={ ()=> navigate('/about') }> 跳转关于页 </button>
   </div>
 )
}

export default Home

路由跳转

传递参数

navigate('/about/？id=传入的参数', { replace: true } )

获取参数

let [params] = useSearchParams() 
let id = params.get('id')

官方文档

链接: https://reactrouter.com/en/main