reactjs - react typescript 错误 : Invariant failed: You should not use <withRouter(App)/> outside a <Router>

Question

我正在开发一个应用程序，其中我使用 Firebase 作为应用程序的身份验证系统，当我尝试实现应用程序的路由时，我开始出现上述标题错误。

我正在使用 withRouter 函数来封装我的 App 组件。

所以我的 App.tsx 文件的代码如下:

import React, { FC, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  Route,
  Switch,
  useHistory,
  withRouter,
  BrowserRouter as Router,
} from "react-router-dom";
import "./App.css";

import Header from "./components/sections/Header";
import SignUp from "./components/pages/SignUp";
import SignIn from "./components/pages/SignIn";
import ForgotPassword from "./components/pages/ForgotPassword";
import Homepage from "./components/pages/Homepage";
import Dashboard from "./components/pages/Dashboard";
import PrivateRoute from "./components/auth/PrivateRoute";
import PublicRoute from "./components/auth/PublicRoute";
import Loader from "./components/UI/Loader";
import firebase from "./firebase/config";
import {
  getUserById,
  setLoading,
  setNeedVerification,
} from "./store/actions/authActions";
import { RootState } from "./store";

const App: FC = () => {
  const dispatch = useDispatch();
  const { loading } = useSelector((state: RootState) => state.auth);
  let history = useHistory();
  // Check if user exists
  // App.tsx
  useEffect(() => {
    dispatch(setLoading(true));
    const unsubscribe = firebase.auth().onAuthStateChanged(async (user) => {
      if (user) {
        await dispatch(getUserById(user.uid));
        if (user.emailVerified) {
          history.push("/homepage");
        } else {
          history.push("/signin");
          dispatch(setNeedVerification());
        }
      }
      dispatch(setLoading(false));
    });

    return () => {
      unsubscribe();
    };
  });

  if (loading) {
    return <Loader />;
  }

  function Routes() {
    return (
      <Switch>
        <PublicRoute path="/signup" component={SignUp} exact />
        <PublicRoute path="/signin" component={SignIn} exact />
        <PublicRoute path="/forgot-password" component={ForgotPassword} exact />
        <PrivateRoute path="/dashboard" component={Dashboard} exact />
        <PublicRoute path="/homepage" component={Homepage} exact />
      </Switch>
    );
  }

  return (
    <Router>
      <Header />
      <Routes />
    </Router>
  );
};

export default withRouter(App);

`所以我认为必须将 Route 库配置到应用程序的主要组件中。

我错过了什么？？

提前致谢!

Answer 1

App 是呈现 Router 的组件，因此 App 本身不能使用任何需要 Router 的组件React 树中更高层的上下文。

解决方案是将 Router 移到 React 树中更高的位置，即将 App 包裹在 Router 中。一旦 App 被 Router 渲染并且因为你正在使用 useHistory Hook ，就不需要用 withRouter 装饰 HOC.

应用

const App: FC = () => {
  ...

  function Routes() {
    return (
      <Switch>
        <PublicRoute path="/signup" component={SignUp} exact />
        <PublicRoute path="/signin" component={SignIn} exact />
        <PublicRoute path="/forgot-password" component={ForgotPassword} exact />
        <PrivateRoute path="/dashboard" component={Dashboard} exact />
        <PublicRoute path="/homepage" component={Homepage} exact />
      </Switch>
    );
  }

  return (
    <>
      <Header />
      <Routes />
    </>
  );
};

export default App;

呈现 App 的索引。

import { BrowserRouter as Router } from "react-router-dom";
import App from '../App';

...

<Router>
  <App />
</Router>