使用道具进行React重定向不会呈现最终组件

Question

我试图通过“state”属性在重定向组件内部传递一条错误消息，从而重定向到一个错误页面。

但是每当我添加“state”属性时，与重定向路由相关联的组件(ErrorPg)就不会呈现(并且我得到一个空白页面)，即使URL被正确地更新了。

我试图遵循第一种解决方案，以供参考。

以下是相关文件。非常感谢。

错误处理程序。tsx（包含重定向组件的文件）

import React from "react";
import { useLocation, Redirect } from "react-router-dom";
import { get } from "lodash";
import ErrorPg from "./c1_pages/ErrorPg/ErrorPg";

const ErrorHandler = ({ children }: any) => {
  const location = useLocation();

  const errorMsg = get(location.state, "errorMsg");

  return errorMsg ? (
    <Redirect to={{ pathname: "/error", state: { errorMsg: errorMsg } }} />
    /*** If I remove the "state" property, like "<Redirect to={{ pathname: "/error" }} />", it works ***/
  ) : (
    children
  );
};

export default ErrorHandler;

Router.tsx（我在/error路径中调用渲染方法以将props传递给ErrorPg组件）。

import React, { useContext } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import PrivateRoute from "./PrivateRoute";
import PrivateWrap from "./PrivateWrap";
import Login from "./c1_pages/LogReg/Login";
import Register from "./c1_pages/LogReg/Register";
import ErrorHandler from "./ErrorHandler";
import ErrorPg from "./c1_pages/ErrorPg/ErrorPg";

function Router() {
  return (
    <BrowserRouter>
      <ErrorHandler>
        <Switch>
          <Route path="/register" component={Register} />
          <Route path="/login" component={Login} />
          <Route path="/error" render={(props) => <ErrorPg {...props} />} /> 
          <PrivateWrap>
            <PrivateRoute />
          </PrivateWrap>
        </Switch>
      </ErrorHandler>
    </BrowserRouter>
  );
}

export default Router;

错误Pg.tsx（我想渲染和使用道具的页面）

import React, { useState } from "react";

const ErrorPg = ({ location }: any) => {
  return (
    <div>
      <h2>{location.state.errorMsg}</h2>
    </div>
  );
};

export default ErrorPg;

Answer 1

能够找到需要一些更改的解决方案。

< li >在Router.tsx中，无需传入props，因为它是由react-router-dom直接注入的。因此将路线更改为:

<Route path="/error" component={ErrorPg} />

import React from "react";
import { useLocation, Redirect } from "react-router-dom";
import { get } from "lodash";
import ErrorPg from "./c1_pages/ErrorPg/ErrorPg";

const ErrorHandler = ({ children }: any) => {
  const location = useLocation();

  const errorMsg = get(location.state, "errorMsg");

  return errorMsg ? (
    <Redirect
      to={{
        pathname: "/error",
        state: { err_msg: errorMsg },
      }}
    />
  ) : (
    children
  );
};

export default ErrorHandler;

import React, { useState } from "react";

const ErrorPg = (props: any) => {

  return (
    <div>
      <h2>{props.location.state.err_msg}</h2>
    </div>
  );
};

export default ErrorPg;