Javascript 异步请求后如何重定向路由

使用useNavigate钩子访问navigate函数，并在获取帐户后发出命令重定向.但这里的问题是应用程序是一个类组件，不能直接使用React钩子.

选项包括:

1. Convert 应用程序 to a function component.
2. 创建一个自定义的withRouter HOC来访问钩子，并将navigate作为props 注入.

应用程序非常简单，转换成函数组件非常简单.

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

const 应用程序 = () => {
  const navigate = useNavigate();
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    getAccounts()
      .then(accounts => {
        setAccounts(accounts);
        navigate("/account/1", { replace: true });
      });
  }, []);

  return (
    <Routes>
      <Route path="/" element={<应用程序Layout accounts={accounts} />}>
        <Route path="/account/:accountId" element={<TimelinePage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Route>
    </Routes>
  );
}

如果类组件更复杂，那么创建自定义的withRouter HOC并作为props 传入navigate可能会更容易.

import { useNavigate, ...other hooks... } from 'react-router-dom';

const withRouter = Component => props => {
  const navigate = useNavigate();
  ...other hooks...

  return (
    <Component
      {...props}
      navigate={navigate}
      ...other hooks...
    />
  );
};

应用程序

class 应用程序 extends Component {
  state = {
    accounts: [],
  }

  componentDidMount() {
    const { navigate } = this.props;
    getAccounts()
      .then(accounts => {
        this.setState({ accounts });
        navigate("/account/1", { replace: true });
      });
  }

  render() {
    const { accounts } = this.state;
    return (
      <Routes>
        <Route path="/" element={<应用程序Layout accounts={accounts} />}>
          <Route path="/account/:accountId" element={<TimelinePage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Route>
      </Routes>
    );
  }
}

export default withRouter(应用程序);