SPA的理解
- 单页Web应用(single page web application,SPA)。
- 整个应用只有一个完整的页面。
- 点击页面中的链接不会刷新页面,只会做页面的局部更新。
- 数据都需要通过ajax请求获取, 并在前端异步展现。
- 单页面、多组件
React Router 5
基本使用
明确好界面中的导航区、展示区
导航区的a标签改为Link标签<Link to="/xxxx">DEmo</Link>
展示区写Route标签进行路径的匹配(在呈现路由组件内容的位置注册路由)
以前的版本<Route path="/xxxx" component={Demo}/><App>得最外侧包裹一个<BroeserRouter>或<HashRouter>
首先src下创建views文件夹,views文件夹下创建Home.tsx和About.tsx
function View() {
return (
<div className="home">
<p>Home</p>
</div>
)
}
export default View
/src下新建router文件夹,再进去新建index.tsx
import App from "../App"
import Home from "../views/Home"
import About from "../views/About"
import {BrowserRouter,Routes,Route} from "react-router-dom"
// 两种路由模式的组件: BrowserRouter ( History模式 ) , HashRouter( Hash模式 )
// const baseRouter = () => {
// return ()
// }
// 以上写法可以简写为:
const baseRouter = () => (
<BrowserRouter>
<Routes>
<Route path="/" element={<App/>}>
<Route path="/home" element={<Home/>}></Route>
<Route path="/about" element={<About/>}></Route>
</Route>
</Routes>
</BrowserRouter>
)
export default baseRouter
在/src/main.tsx中把顶级组件App替换为这个路由对象:
// 引入路由对象
import Router from './router';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Router />
</React.StrictMode>
)
路由组件与一般组件
写法不同:
一般组件:<Demo/>
路由组件:<Route path="/demo" component={Demo}/>
存放位置不同:
一般组件:components
路由组件:pages
接收到的props不同:
一般组件:写组件标签时传递了什么,就能收到什么
路由组件:接收到三个固定的属性
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"
NavLink及其封装
- NavLink可以实现路由链接的高亮,通过activeClassName指定样式名
- 标签体内容是一个特殊的标签属性,可以通过this.props.children获取。
<NavLink activeClassName="xxx" className="list-group-item" to="/about">About</NavLink>
Switch
- 注册路由时用Switch包裹所有路由
- 通常情况下,path和component是一一对应的关系。
- Switch可以提高路由匹配效率(单一匹配)。
Redirect重定向
- 一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
React Router 6 快速上手
React Router 以三个不同的包发布到 npm 上,它们分别为:
1)react-router: 路由的核心库,提供了很多的:组件、钩子。
2) react-router-dom: 包含react-router所有内容,并添加一些专门用于 DOM 的组件,例如 <BrowserRouter>等 。
3) react-router-native: 包括react-router所有内容,并添加一些专门用于ReactNative的API,例如:<NativeRouter>等。与React Router 5.x 版本相比,改变了什么?
1) 内置组件的变化:移除<Switch/> ,新增 <Routes/>等。
2) 语法的变化:component={About} 变为 element={<About/>}等。
3).新增多个hook:useParams、useNavigate、useMatch等。
4) 官方明确推荐函数式组件了!!!
<Routes/> 与 <Route/>
v6版本中移出了先前的<Switch>,引入了新的替代者:<Routes>。
<Routes> 和 <Route>要配合使用,且必须要用<Routes>包裹<Route>。
<Route> 相当于一个 if 语句,如果其路径与当前 URL 匹配,则呈现其对应的组件。
<Route caseSensitive> 属性用于指定:匹配时是否区分大小写(默认为 false)。
当URL发生变化时,<Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现组件 。
<Route> 也可以嵌套使用,且可配合useRoutes()配置 “路由表” ,但需要通过 <Outlet> 组件来渲染其子路由。
<Link>
作用: 修改URL,且不发送网络请求(路由链接)。
注意: 外侧需要用
<BrowserRouter>
或<HashRouter>
包裹。
<Outlet>
当
<Route>
产生嵌套时,渲染其对应的后续子路由。
/src/App.tsx中,使用 组件作为占位符组件
import {Outlet} from "react-router-dom";
function App() {
//const [count, setCount] = useState(0)
return (
<div className="App">
{/* 占位符组件,窗口,有点类似于Vue中的 router-view */}
<Outlet />
</div>
)
}
export default App
编程式导航--设置菜单点击跳转
/src/App.tsx中,使用 组件进行跳转:
import {Outlet,Link} from "react-router-dom"
...
<div className="App">
<Link to="/home">home</Link> |
<Link to="/about">about</Link>
{/* 占位符组件,窗口,有点类似于Vue中的 router-view */}
<Outlet />
</div>
<Navigate>
作用:只要
<Navigate>
组件被渲染,就会修改路径,切换视图。
replace
属性用于控制跳转模式(push 或 replace,默认是push)。
配置重定向
/src/router/index.tsx中:
import {BrowserRouter,Routes,Route,Navigate} from "react-router-dom"
...
<Route path="/" element={<App/>}>
{/* 配置 用户访问/的时候,重定向到/home路径 */}
<Route path="/" element={<Navigate to="/home" />}></Route>
...
</Route>
Hooks
1. useRoutes()
作用:根据路由表,动态创建<Routes>和<Route>。
示例代码://路由表配置:src/routes/index.js
import About from '../pages/About'
import Home from '../pages/Home'
import {Navigate} from 'react-router-dom'
export default [
{
path:'/about',
element:<About/>
children:[ //子路由
{
path:'news',
element:<News/>
}
]
},
{
path:'/home',
element:<Home/>
},
{
path:'/',
element:<Navigate to="/about"/>
}
]
//App.jsx
import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from './routes'
export default function App() {
//根据路由表生成对应的路由规则
const element = useRoutes(routes) //一级路由用useRoutes()和element定位,子路由用<outlet />定位
return (
<div>
......
{/* 注册路由 */}
{element}
......
</div>
)
}
注意: 一级路由(App.js中)用useRoutes()和element定位,子路由用<outlet />定位
2. useNavigate()
作用:返回一个函数用来实现编程式导航。
示例代码:
import React from 'react'
import {useNavigate} from 'react-router-dom'
export default function Demo() {
const navigate = useNavigate()
const handle = () => {
//第一种使用方式:指定具体的路径
navigate('/login', {
replace: false,
state: {a:1, b:2}
})
//第二种使用方式:传入数值进行前进或后退,类似于5.x中的 history.go()方法
navigate(-1)
}
return (
<div>
<button onClick={handle}>按钮</button>
</div>
)
}
3. useParams()
作用:回当前匹配路由的params参数,类似于5.x中的match.params。
示例代码:
import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
import User from './pages/User.jsx'
function ProfilePage() {
// 获取URL中携带过来的params参数
let { id } = useParams();
}
function App() {
return (
<Routes>
<Route path="users/:id" element={<User />}/>
</Routes>
);
}
4. useSearchParams(search,setSearch)
作用:用于读取和修改当前位置的 URL 中的查询字符串。
返回一个包含两个值的数组,内容分别为:当前的seaech参数、更新search的函数。
示例代码:
import React from 'react'
import {useSearchParams} from 'react-router-dom'
export default function Detail() {
const [search,setSearch] = useSearchParams()
const id = search.get('id')
const title = search.get('title')
const content = search.get('content')
return (
<ul>
<li>
<button onClick={()=>setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数</button>
</li>
<li>消息编号:{id}</li>
<li>消息标题:{title}</li>
<li>消息内容:{content}</li>
</ul>
)
}
5. useLocation()
作用:获取当前 location 信息,对标5.x中的路由组件的location属性。可以传递state参数
示例代码:
import React from 'react'
import {useLocation} from 'react-router-dom'
export default function Detail() {
const {state:{id,title,content}} = useLocation()
//const x = useLocation()
//console.log('@',x)
// x就是location对象:
/*
{
hash: "",
key: "ah9nv6sz",
pathname: "/login",
search: "?name=zs&age=18",
state: {a: 1, b: 2}
}
*/
return (
<ul>
<li>消息编号:{id}</li>
<li>消息标题:{title}</li>
<li>消息内容:{content}</li>
</ul>
)
}
6. useMatch()
作用:返回当前匹配信息,对标5.x中的路由组件的match属性。
示例代码:
<Route path="/login/:page/:pageSize" element={<Login />}/>
<NavLink to="/login/1/10">登录</NavLink>
export default function Login() {
const match = useMatch('/login/:x/:y')
console.log(match) //输出match对象
//match对象内容如下:
/*
{
params: {x: '1', y: '10'}
pathname: "/LoGin/1/10"
pathnameBase: "/LoGin/1/10"
pattern: {
path: '/login/:x/:y',
caseSensitive: false,
end: false
}
}
*/
return (
<div>
<h1>Login</h1>
</div>
)
}
7. useInRouterContext()
作用:如果组件在 <Router> 的上下文中呈现,则 useInRouterContext 钩子返回 true,否则返回 false。
8. useNavigationType()
作用:返回当前的导航类型(用户是如何来到当前页面的)。
返回值:POP、PUSH、REPLACE。
备注:POP是指在浏览器中直接打开了这个路由组件(刷新页面)。
9. useOutlet()
作用:用来呈现当前组件中渲染的嵌套路由。
示例代码:
const result = useOutlet()
console.log(result)
// 如果嵌套路由没有挂载,则result为null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象
10.useResolvedPath()
作用:给定一个 URL值,解析其中的:path、search、hash值。