React BrowserRouter使用location.state传参时location未定义问题

问题原因及修复方案 #

• 1 App.tsx中/order-form对应的Route使用render属性渲染时，未传递路由原生props，导致路由属性无法注入组件
• 2 OrderForm函数组件的入参写法错误，React函数组件仅接收一个props参数，拆分两个参数会导致路由属性无法正常获取
• 3 未处理state不存在的边界场景，直接读取属性容易报错

第一步：修改App.tsx中的Route配置

给render回调添加路由props参数，并透传给OrderForm组件：

<Route path="/order-form" render={(routerProps) => (
    <OrderForm {...routerProps} {...userData} />
)} exact/>

第二步：修正OrderForm组件的参数写法

所有属性都从唯一的props参数中解构，同时添加可选链做边界兼容：

const OrderForm: React.FunctionComponent<UserData & RouteComponentProps<{}, StaticContext, LocationState>> = (props) =>  {
    // 从props中解构所有需要的属性
    const { mail, location, ...restUserData } = props;

    const onSubmit = (data: FormValues) => {
        const Calculator = new CalculatorService(restUserData)
        console.log("Works",data)
    }

    return <OrderFormElements 
                mail={mail} 
                // 加可选链避免state不存在时报错
                savedOrderData={location.state?.savedOrder} 
                onSubmit={onSubmit} />
}

内容的提问来源于stack exchange，提问作者Max Pan