安装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、核心内置组件说明
- BrowerRouter
作用: 包裹整个应用,一个React应用只需要使用一次 - Link
作用: 用于指定导航链接,完成声明式的路由跳转
<Link to="/">首页</Link>
这里to属性用于指定路由地址,表示要跳转到哪里去,Link组件最终会被渲染为原生的a链接
3. Routes
作用: 提供一个路由出口,组件内部会存在多个内置的Route组件,满足条件的路由会被渲染到组件内部
<Routes>
<Route path="/" element={<Home />}></Route>
</Routes>
- 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')