React project, when a user enters an interface, he / she needs to judge whether the user's information exists. If not, he / she will request.

problem description

1. No matter what interface users enter, they all need to obtain user information and the function shared by Wechat
2. If users have already obtained certain information, they will no longer be transferred to the request interface for this information

the environmental background of the problems and what methods you have tried

react project, Wechat official account

related codes

index.js entry file

ReactDOM.render(
    <Provider store={store}>
        <Route />
    </Provider>
    ,
    document.getElementById("root"));
registerServiceWorker();

router/index.js

export const routes = [{
    path: "/x",
    component: () => import("../xx")
}, {
    path: "/xx",
    component: () => import("../xx")
}, 
...
]
const router = (props) => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/" render={() => <Redirect to="/invite" />} />
            {routes.map(({ path, title, component }, index) => (
                <Route
                    key={index}
                    exact
                    path={path}
                    onEnter={() => { document.title = title }}
                    component={AsyncComponent(component)}
                />
            ))}
        </Switch>
    </BrowserRouter>
)

Home.js Home

componentDidMount() {
    const { dispatch } = this.props
    get(url).then(data => {
      if (!data) {
        window.location.href = "xxx"
      } else {
        dispatch({
          type: xxx,
          openid: xxx
          avatar: xxx,
          name: xxx
        })

        post(url, params).then(data => {
          if(!data){
            this.props.history.push("/");
            return false;
          }
          
          window.wx.config({
            debug: true, 
            appId: data.appId, 
            timestamp: data.timestamp, 
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: data.jsApiList
          });

          window.wx.ready(function () {
            // 
            window.wx.onMenuShareTimeline(shareData);

          });
          ...
        })
      }
    })
  }

what result do you expect? What is the error message actually seen?

at present, I write down the configuration of obtaining user information and sharing by Wechat on the home page, but find that when users enter other addresses from the address bar (or refresh them in other routing interfaces), For example, when the route http://xx.com/an enters (refresh), you cannot get user information and Wechat"s configuration information
I think no matter which interface the user enters or refreshes, Both the user"s information and Wechat"s configuration information can be obtained

[question]:
1. Where can I write the js of componentDidMount in home.js to avoid this problem? Is there any other solution?
2. At present, I have written the js of componentDidMount in home.js in router/index.js. Is this method common in the company"s official projects?

not long after I first came into contact with React, I asked the great gods to give me some ideas. Thank you

<BrowserRouter> <AuthRoute/> <Switch> <Route exact path="/" render={() => <Redirect to="/invite" />} /> {routes.map(({ path, title, component }, index) => ( <Route key={index} exact path={path} onEnter={() => { document.title = title }} component={AsyncComponent(component)} /> ))} </Switch> </BrowserRouter>