react router 微信分享踩坑A 页面跳转到 B 页面，点击返回按钮，从 B 页面返回到 A 页面后，点击 A

业务背景：App 中嵌入 h5 单页应用，A 页面匹配根路径，B 页面匹配其他路径，A 和 B 都有分享功能，但分享逻辑不同，A 页面通过路由方式跳转到 B 页面。

问题：

B 页面分享到微信正常，A 页面分享到微信后，微信中打开页面白屏；
A 页面跳转到 B 页面，点击返回按钮，从 B 页面返回到 A 页面后，点击 A 页面的分享按钮分享到微信，在微信中打开的页面是 B 页面。

路由配置如下：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { HashRouter as Router, Route, Switch } from "react-router-dom";

const A = React.lazy(
  () => import(/* webpackChunkName: 'A'*/ "@/A")
);

const B = React.lazy(
  () => import(/* webpackChunkName: 'B'*/ "@/B")
);

ReactDOM.render(
    <Router>
      <React.Suspense fallback={<div>加载中...</div>}>
        <Switch>
          <Route path="/b" component={B}></Route>
          <Route exact path="/" component={A}></Route>
        </Switch>
      </React.Suspense>
    </Router>,
  document.getElementById("app") as HTMLElement
);

解决：

A 页面路径也就是根路径地址为 mauction.jd.com/newActivity… 分享到微信中以后，微信中打开页面，复制链接，微信会加上一些参数：

https://test.com/test/home.html?lng=116.562427&lat=39.786978&sid=a337aab3a0769ef775a3467317ba834w&un_area=1_2805_2855_0#/&_ts=1612855926691&utm_source=iosapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=Wxfriends&ad_od=share&utm_user=plusmember

问题1，排查后发现，路由使用 exact 严格匹配模式，当链接改变后，便无法匹配到根路由，导致白屏现象。只要将根路由严格匹配模式去掉，即去掉 exact 属性就可以了。

问题2，排查后发现，A 页面的分享逻辑因为没有涉及到获取页面数据，所以直接写在 A 组件的外层，B 页面的分享写在 B 组件的 componentDidMount 中。当 B 返回到 A 的时候，A 页面会重新挂载 A 组件，B 页面卸载 B 组件，并不会导致浏览器重新向服务器发送请求。浏览器不发请求，A 页面就不会刷新，写在 A 组件外的函数就不会执行，入口页面 html 中加载的 js 以及 css 资源并不会重新加载。App 提供的分享方法入参如果没有被重置，依然会使用上一次的入参。正确的方法是需要将 A 页面的分享写在 A 组件的 componentDidMount 中，并修改入参。（每一款 App 都有封装好的分享方法，供 h5 开发者去调用。但浏览器分享功能，开发者无法自定义。）