React Redirect with props 不会渲染最终组件

Posted 2023-02-22

【中文标题】React Redirect with props 不会渲染最终组件

【英文标题】：React Redirect with props does not render final component

【发布时间】：2021-08-28 21:27:30

【问题描述】：

我正在尝试通过“状态”属性在重定向组件中传递错误消息来重定向到错误页面。

但是每当我添加“状态”属性时，与重定向路由关联的组件（ErrorPg）不会呈现（并且我得到一个空白页面），即使 URL 已正确更新。

我正在尝试遵循第一个解决方案here，以供参考。

以下相关文件。谢谢，

ErrorHandler.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”路径中调用 render 方法将 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;

ErrorPg.tsx（我要渲染并使用道具的页面）

import React,  useState  from "react";

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

export default ErrorPg;

我得到的空白页

【参考方案1】：

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

在 Router.tsx 中，不需要传入 props，因为它是由 react-router-dom 直接注入的。所以将路线更改为：

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

在ErrorHandler中，由于某种原因，我不能使用键“errorMsg”，所以我将其替换为“err_msg”，例如：

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;

更新了 ErrorPg 以使用该密钥。

import React,  useState  from "react";

const ErrorPg = (props: any) => 

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

export default ErrorPg;