React运行报Can not read properties of null (reading '0')错误求解决

• 核心原因是你使用的react-router-dom v6版本已经正式移除了withRouter高阶组件，你用withRouter包裹App组件后，props上并没有注入history对象，调用props.history.replace自然会抛出不存在的错误。
• 这个报错和异步时序无关，所以你尝试的setTimeout方案不会生效，也不需要用callback来解决。

方案1：自定义兼容类组件的withRouter高阶组件 #

如果不想修改现有类组件结构，可以自己实现一个适配v6版本的withRouter，替换从react-router-dom导入的同名方法即可：

import { useLocation, useNavigate, useParams } from 'react-router-dom';

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const navigate = useNavigate();
    return (
      <Component
        {...props}
        // 注入和v5版本用法一致的history.replace方法
        history={{ replace: (path) => navigate(path, { replace: true }) }}
      />
    );
  }
  return ComponentWithRouterProp;
}

方案2：将类组件改写为函数组件（更推荐） #

v6版本的react-router-dom原生提供钩子给函数组件使用，代码更简洁：

import React from 'react';
import { Link, useNavigate, BrowserRouter } from 'react-router-dom';
import Auth from './auth/auth';
import { Security } from '@okta/okta-react';
import { oktaAuth, toRelativeUrl } from '../../../../libs/okta-auth.js';
import Routes from './routes/routes';

function App() {
  const navigate = useNavigate();
  const restoreOriginalUri = async (_oktaAuth, originalUri) => {
    navigate(toRelativeUrl(originalUri, window.location.origin), { replace: true });
  };

  return (
    <h1>
      Welcome to clinical-trials!!!
      <br />
      <hr />
      <br />
      <div role='navigation'>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
        </ul>
      </div>
      <div>
        <Security
          oktaAuth={oktaAuth}
          restoreOriginalUri={restoreOriginalUri}
        >
          <Auth />
          <Routes />
        </Security>
      </div>
    </h1>
  );
}

// 外层直接套BrowserRouter即可，不需要额外的高阶组件包裹
export default function WrappedApp() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  )
}

内容的提问来源于stack exchange，提问作者Shruti sharma