How to pass Props to another component using React-Router Redirect

Question

I have a pure React app (no external state container) where I use react-router. In this app I have a component <SearchMain /> that contains two children a <Search /> component, basically a form that contains elements in order to perform a search and a <DisplayResults /> component that display results in tabular form.

Inside <Search /> component I have two buttons, one it is used to display data in tabular form, the other to display data in calendar form. The onClick events of the two buttons are wired to the <Search /> parent component through two arrow functions passed as props, updateTableData and handleShowCalendar.

Both functions perform a search and store the result in this.state.searchResults. updateTableData shows the results in a <DisplayResults /> component, handleShowCalendar wants to show the results in calendar from in another component <DisplayCalendar />, linked to the route '/displayCalendar'. I would like to use the <Redirect /> declarative component, instead of using history.push(). In the solution below I am able to send the data through the URL's querystring but that's not the solution that I look for, I would like to pass such data the same way props are passed from parent to child components. I looked for information on the web but I couldn't find a solution to my issue. The closest I found is to use

<Route
  path='/displayCalendar'
  render={(props) => <DisplayCalendar {...props} searchResults={this.state.searchResults} />}
/>

but how can I programmatically change the <Route /> and pass the state of my component on button click by using <Redirect />?

export class SearchMain extends React.Component<RouteComponentProps<{}>, State> {

    constructor(props: any)
    {
        super(props);

        this.state = {...};
        ...
    }
        ...
    updateTableData(searchParams: SearchParameters) {
          this.makeRequest(searchParams);
    }

    handleShowCalendar(searchParams: SearchParameters) {
        this.makeRequest(searchParams);
        this.setState({
            ...this.state,
            redirectToCalendar: true
        });
    }

    public render() {
        const { loading, showCalendar, redirectToCalendar, searchResults } = this.state;

        if (redirectToCalendar)
            return (<Redirect to={{
                pathname: '/displayCalendar',
                search: JSON.stringify(this.state.searchResults)
            }} />)

        return (<div>
            <Row>
                <Search search={(searchParams) => 
                  this.updateTableData(searchParams)} showCalendar={(searchParams) => this.handleShowCalendar(searchParams)} />
                {searchResults && <DisplayResults searchResults={searchResults} /> }
                </Row>
           </div>);
    }

Check https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-in-react-router-v4/45263164#45263164 and https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router/44128108#44128108 — Shubham Khatri, Apr 30 '18 at 09:51
Possible duplicate of [How to pass params with history.push in react-router v4?](https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-in-react-router-v4) — Striped, Apr 30 '18 at 11:05

How to pass Props to another component using React-Router Redirect

0 Answers0