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值。
1181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
