# Hello
路由是根据不同的网址显示不同的组件，并有一系列API的封装
import React from 'react';
import { HashRouter as Router, Link, Route } from "react-router-dom"
const Home = () => 首页
;
const Prod = () => 产品
;
const User = () => 用户
;
function App() {
return (
<>
首页
产品
用户
)
}
export default App;
Link 的 to 属性就是要跳转的路由
Rote 中的 path 对应 to ，表示要渲染的组件
exact 表示完全匹配，如果没有，那么 / 或匹配 /* 而不是 /
# Router
组成
BrowserRouter
HashRouter
MemoryRouter
NativeRouter
StaticRouter
其中 BrowserRouter 和 HashRouter 属于浏览器路由
浏览器路由
BrowserRouter 的路由类似 http://localhost:3000/user
HashRouter 的路由类似 http://localhost:3000/#/user
属性
pathname 路由的地址其实是 pathname + path
比如 Router 加上 pathname="api"
使用前：http://localhost:3000/#/user
使用后：http://localhost:3000/#/api/user
首页
产品
用户
forceRefresh 布尔值，是否刷新整个页面，如果为 true ，每次跳转路由都会刷新页面
首页
产品
用户
getUserConfirmation 当导航需要确认时执行的函数，需配合 Prompt 使用
Prompt 写在需要提示的路由中，也可不写 getUserConfirmation ，如果不写，默认是window弹框
写了 getUserConfirmation 后，可以在处理跳转前的逻辑
import React from 'react';
import { HashRouter as Router, Link, Route, Prompt } from "react-router-dom"
const Home = () => 首页
;
const Prod = () => 产品
;
const User = () => 用户
;
const getConfirmation = (message, callback) => {
const allowTransition = window.confirm(message)
callback(allowTransition)
}
function App() {
return (
<>
首页
产品
用户
)
}
export default App;
hashType HashRouter独有，一共有三个值
slash #/api/user
noslash #api/user
hashbang #!/api/user
# Link
属性 to
路由跳转地址，可以是字符串
用户
可是是对象
用户
对象有如下属性：
pathname 跳转地址
search 参数传递
hash 跳转的锚点
state 状态，可以通过 params.location.state 获取
const User = (params) => {
return params.location.state ? {params.location.state.name}
: null;
}
属性 replace
布尔值，如果为 true，则访问历史替换原地址
如果为false（默认），访问历史记录添加一项
# NavLink
特殊的 Link
如果在当前路由状态，会默认的添加一个 active 样式
属性：
activeStyle 如果在当前路由状态，可以添加额外的style
activeClassName 如果在当前路由状态，可以添加额外的 class 并替换 active
exact 完全匹配 activeStyle 和 activeClassName 才会生效
# Route
三种使用方式
使用component，默认把参数传到组件中
首页
const Home = (props) => {
console.log(props);
return 首页
;
}
使用 render ，需自行把参数添加到组件中
const Prod = (props) => {
console.log(props);
return 产品
;
}
使用 children，每次都会执行，有一个参数 match 可以判断是否是指定路由
const User = (props) => {
console.log(props);
return 用户
;
}
{
return props.match ? match
先看一下 match 的结构
{
isExact: true,
params: { id: "2" },
path: "/pro/:id",
url: "/pro/2"
}
isExact 是否全匹配
params 参数
path 匹配路径格式
url 匹配路径
作用一: 路由参数
可以使用 props.match.params 获取参数
import React from 'react';
import { HashRouter as Router, Link, Route } from "react-router-dom"
const Home = () => 首页
;
const User = () => 用户
;
const ProdDetail = (props) => 产品:{props.match.params.id}
;
const Prod = () => {
return (
<>
产品1
产品2
产品3
首页
产品1
用户
)
}
export default App;
作用二：变量提取
const Prod = (props) => {
const basePath = props.match.url;
return (
<>
产品1
产品2
产品3
location
可以拿到 Link:to 中的内容，如果是字符串则拿不到 state
用户
const User = ({ location }) => {
console.log(location);
return 用户
;
}
// 得到的结果为
{
hash: "#h1",
pathname: "/user",
search: "?name=lisi",
state: { name: "张三" }
}
history
操作路由的一些 API ，可以从传递的参数中解构获取
const User = ({ history }) => {
console.log(history);
return 用户
;
}
属性：
length 堆栈数量
action 当前动作，是跳转过来的（PUSH），还是切换过来的（REPLACE）还是移出的（POP）
方法：
push 跳转路由
replace 替换栈顶路由
go 前进或后退多少路由
goBack 后退1步，相当于 go(-1)
goForward 前进一步，相当于 go(1)
block 阻止跳转
# Redirect
重定向到新的地址
import React from 'react';
import { HashRouter as Router, Link, Route, Redirect } from "react-router-dom"
const Home = () => 首页
;
const Prod = () => 产品
;
const User = () =>
首页
产品
用户
)
}
export default App;
此时点用户，会被重定向到产品路由
常用作配合状态使用，当状态更新时，重定向到其他路由，比如登出
import React, { useState } from 'react';
import { HashRouter as Router, Link, Route, Redirect } from "react-router-dom"
const Home = () => {
const [isLogin, setisLogin] = useState(true);
return (
isLogin ?
<>
恭喜xx登录成功！
setisLogin(false)}>登出
:
登录页
)
};
function App() {
return (
<>
首页
)
}
export default App;
# Switch
未使用 Switch 前，一个地址可以匹配多个路径
比如以下代码，路径 /pro 可匹配 / 和 /pro ，除非给 Route 加上 exact
<>
首页
产品
用户
使用 Switch 之后，只会匹配到遇到的第一个路由
比如以下代码，无论是 / 还是 /pro 还是 /user 都是匹配到了首页
<>
首页
产品
用户
弱匹配的路由放在后面或者加上 exact 属性
<>
首页
产品
用户
Switch 配合 404 页面
<>
首页
产品
用户
# Prompt
组件确认跳转导航，在路由离开之前弹框，如果点击是，则跳转，否则不跳转
import React from 'react';
import { HashRouter as Router, Link, Route, Switch, Prompt } from "react-router-dom"
const Home = () => Home!
;
const User = () => User!
;
const Prod = () => Prod!
;
function App() {
return (
<>
首页
产品
用户
)
}
export default App;
当首页跳转其他页时，会提示是否离开首页，如果选是，则离开，否则不离开
message 还可以是一个函数，返回结果作为提示语,函数的参数的location
const Home = () => Home! {
return `是否离开首页,去${location.pathname}`
}
}>
;
Prompt 还有一个属性，when，默认为 true ， 如果为false，则不提示直接跳转
const Home = () => Home! {
return `是否离开首页,去${location.pathname}`
}
}>
;
可以和 getUserConfirmation 配合使用，自定义弹出提示
import React from 'react';
import { HashRouter as Router, Link, Route, Switch, Prompt } from "react-router-dom"
const Home = () => Home!
;
const User = () => User!
;
const Prod = () => Prod!
;
const getUserConfirmation = (message, call) => {
const flag = window.confirm(message);
call(flag);
}
function App() {
return (
<>
首页
产品
用户
)
}
export default App;