reactjs - React BrowserRouter: Plats är odefinierad

Jag försöker skicka ett objekt från en komponent till en annan med hjälp av state i location, men varje gång jag försöker läsa egenskapen hos state skriver det till mig att location är odefinierad.

Här är min App.tsx

import React, { Component } from "react";
import {BrowserRouter as Router, Redirect, Route} from 'react-router-dom';

import AdminPanel from "./components/admin-panel/admin-panel";
import UserPanel from "./components/user-panel/user-panel";
import OrderForm from "./components/order-form/order-form";
import Login from "./components/login/login";
import OrderSummary from "./components/order-summary/order-summary";
import Header from "./components/header/header";
import UserService from "./services/user-service";
import {LoginData} from "./types/types";

export default class App extends Component {

    //User data information object creation
    userService = new UserService()

    state = {
        isAuthorised: false
    }

    //userService.login() execution if succeed change isAuthorised state on true
    login = async (data: LoginData) => {
        if (await this.userService.login(data)) {
            this.setState({
                isAuthorised: true
            })
        }
    }

    render() {
        const {isAuthorised} = this.state
        const {userData} = this.userService
        const {role, name} = userData

        return (
            <div>
                <Header isAuthorised={isAuthorised} name={name}/>
                <Router>
                    {
                        !isAuthorised && (<Redirect to='/' />)
                    }
                    <Route path="/" render={() => (
                        <Login login={this.login} isAuthorised={isAuthorised} role={role}/>
                    )} exact/>
                    <Route path="/admin-panel" component={AdminPanel} exact/>
                    <Route path="/user-panel" render={() => (
                        <UserPanel isAuthorised={isAuthorised} userData={userData} />
                    )} exact/>
                    <Route path="/order-form" render={() => (
                        <OrderForm {...userData} />
                    )} exact/>
                    <Route path="/order-summary" component={OrderSummary} exact/>
                </Router>
            </div>
        );
    }
}

Här är min komponent som skickar data:

import React, {useState} from "react";
import {Link} from "react-router-dom";
import {DefaultValues} from "react-hook-form";
import {FormValues} from "../../../types/types";

type AccordeonItem = {
    title: string,
    data: DefaultValues<FormValues>
}

export const AccordeonItem = ({ title, data }: AccordeonItem) => {
 
    return (
       <div className="p-4 pt-0">
          <p className="text-gray-700">Some text</p>
          <Link to={{ pathname: '/order-form', state: { savedOrder: data} }}>
             Reorder
          </Link>
       </div>
    );
};

Och slutligen, en komponent som ska ta emot data:

import React from "react";
import OrderFormElements from "../parts/form-elements/order-form-elements";
import {FormValues, UserData} from "../../types/types";
import CalculatorService from "../../services/calculator-service";
import {RouteComponentProps, withRouter} from "react-router-dom";
import { StaticContext } from 'react-router';
import {DefaultValues} from "react-hook-form";

type LocationState = {
    savedOrder: DefaultValues<FormValues>
}


const OrderForm: React.FunctionComponent<UserData & RouteComponentProps<{}, StaticContext, LocationState>> = (userData: UserData, {location}: RouteComponentProps<{}, StaticContext, LocationState>) =>  {

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

    return <OrderFormElements 
                mail={userData.mail} 
                savedOrderData={location.state.savedOrder} 
                onSubmit={onSubmit} />
}

export default withRouter(OrderForm)

Så som jag sa tidigare, här får jag ett fel att platsen är odefinierad

                mail={userData.mail} 
                savedOrderData={location.state.savedOrder} 
                onSubmit={onSubmit} />

Det verkar som att jag använder rätt import från react-router-dom, men kan fortfarande inte lösa problemet.

Svar #1

För att skicka props som history till din route-komponent måste du använda routens render-props för att göra det.

Gör de nödvändiga ändringarna i din App.tsx-fil enligt följande.

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

Och ändra OrderForm-komponentens funktionsparametrar som följer för att få location-egenskapen.

const OrderForm: React.FunctionComponent<UserData & RouteComponentProps<{}, StaticContext, LocationState>> = (userData: UserData, location: RouteComponentProps<{}, StaticContext, LocationState>) =>  {

Hoppas att detta skulle lösa ditt problem.