容易忘记的骚操作
组件懒加载（动态引入组件）
需要用到babel的动态引入插件@babel/plugin-syntax-dynamic-import，安装之后，webpack配置如下：
{
"presets": ["@babel/preset-react"],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
然后安装@loadable/component，example：
import loadable from "@loadable/component";
import Loading from "./Loading.js";
const LoadableComponent = loadable(() => import("./Dashboard.js"), {
fallback: <Loading />
});
export default class LoadableDashboard extends React.Component {
render() {
return <LoadableComponent />;
}
}
匹配路由
useRouteMatch
// 注意用这种的话不能放在方法里面，只能放在FC里面
import { useRouteMatch } from "react-router-dom";
function BlogPost() {
let match = useRouteMatch("/blog/:slug");
// Do whatever you want with the match...
return <div />;
}
matchPath
import { matchPath } from "react-router";
const match = matchPath("/users/123", {
path: "/users/:id",
exact: true,
strict: false
});
<Prompt>
用于组件销毁时触发提醒，如：
<Prompt
when={formIsHalfFilledOut}
message="Are you sure you want to leave?"
/>
但是实际使用貌似只有离开当前页面到其他页面会触发，关闭页面并不会提示，关闭页面的提示需要如下操作
window.onbeforeunload = () => {
return '你想提示的信息'
}
也可以加上是否需要显示的判断
window.onbeforeunload = () => {
if (needRemind) {
return '你想提示的信息'
}
}
<Redirect>
如果在<Switch>中使用<Redirect>
加from属性，可以将from中所带的参数，匹配传入to中
如果不在<Switch>中，则可以自定义一个组件来带参重定向（暂时没发现其他方法，有好办法的还请不吝赐教）
import React from 'react'
import { Redirect, useParams, generatePath } from 'react-router'
interface Props {
to: string
}
const RedirectWithParam: React.FC<Props> = (props: Props) => {
let { to } = props
const params = useParams<{ [key: string]: string }>()
to = generatePath(to, params)
return <Redirect to={to} />
}
export default React.memo(RedirectWithParam)
如何通配路由
大部分场景应用于路由匹配不上的情况，跳转404或者主页。
用react-router-config时，由于没有通配符*了，可以将router.js/router.ts 改为router.jsx/router.tsx后，直接在path: '/'规则最后添加一条，代码如下。
{
path: '/',
component: Layout,
routes: [
...
{
render: () => <Redirect to="404页面路由" />,
},
],
},
直接使用<Switch><Route>时，直接在最后面添加一条<Route>即可。
<Switch>
<Route path="/homepage" component={Homepage} />
<Route path="/subpage" component={Subpage} />
<Route component={404Page} />
</Switch>
