目录
一、项目环境
# 创建react项目
$ yarn create vite react-router --template react
# 安装所有依赖包
$ yarn
# 启动项目
$ yarn dev
# 安装react-router包
$ yarn add react-router-dom@6
二、基础使用
步骤一:导入必要的路由router内置组件
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
步骤二:准备两个react组件
const Home = () => <div>this is 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>
)
}
三、路由核心内置组件说明
1.BrowerRouter
作用: 包裹整个应用,一个React应用只需要使用一次
模式:
模式 |
实现方式 |
路由url表现 |
HashRouter |
监听url hash值实现 |
http://localhost:3000/#/about |
BrowerRouter |
h5的 history.pushState API实现 |
http://localhost:3000/about |
2.Link
作用: 用于指定导航链接,完成声明式的路由跳转 类似于 <router-link/>
<Link to = "/path">页面</Link>
这里to属性用于指定路由地址,表示要跳转到哪里去,Link组件最终会被渲染为原生的a链接
3.Routes
作用: 提供一个路由出口,组件内部会存在多个内置的Route组件,满足条件的路由会被渲染到组件内部,类比 router-view
4.Route
作用: 用于定义路由路径和渲染组件的对应关系 [element:因为react体系内 把组件叫做react element]
<Route path="/about" element={ <About/> }>
其中path属性用来指定匹配的路径地址,element属性指定要渲染的组件,图中配置的意思为: 当url上访问的地址为 /about 时,当前路由发生匹配,对应的About组件渲染