容易忘记的骚操作

组件懒加载（动态引入组件）

需要用到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 />;
  }
}

loadable-component官网

匹配路由

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>