Redirecting from a search form to a results page in reactjs

Question

I am currently developing my first reactjs app and am having difficulties navigating from a Search component to a Results component using react-router-dom.

The search component accepts entries from the user, performs a get request with axios and updates its results state.

import axios from 'axios';
import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
import Results from './Results';

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: [],
      term: '',
    };

    this.submit = this.submit.bind(this);
    this.changeTerm = this.changeTerm.bind(this);
  }

  changeTerm(event) {
    this.setState({term: event.target.value});
  }

  submit(event) {
    let url = 'http://api.example.com/results?q=' + encodeURI(this.state.term) + '&json=1';
    axios.get(url)
      .then(response => {
        let data = {
          results: response.data,
        };
        this.setState(data);
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div>
        <form onSubmit={this.submit}>
          <input onChange={this.changeTerm}/>
          <Button type="submit" bsStyle="primary">Find</Button>
        </form>
        <Results data={this.state.results}/>
      </div>
    );
  }
}

export default Search;

The results are currently displayed directly beneath the search component, but I would like to redirect the results to a new page with a different url. Both pages have to be different, because they have completely different structures and styles and must point to different urls.

Is it possible to forward the results from the Search component to the Results Component using react router? I am also open to other solutions which are not based on react router.

Answer 1

Have you checked out the Redirect component? Here's a basic idea (without actually testing it) that should get you started. You'll obviously have to add some more code to get it working.

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: [],
      term: '',
    };

    this.submit = this.submit.bind(this);
    this.changeTerm = this.changeTerm.bind(this);
  }

  changeTerm(event) {
    this.setState({term: event.target.value});
  }

  submit(event) {
    let url = 'http://api.example.com/results?q=' + encodeURI(this.state.term) + '&json=1';
    axios.get(url)
      .then(response => {
        let data = {
          results: response.data,
        };
        this.setState(data);
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div>
        <form onSubmit={this.submit}>
          <input onChange={this.changeTerm}/>
          <Button type="submit" bsStyle="primary">Find</Button>
        </form>
        {this.state.results.length > 0 &&
          <Redirect to={{
            pathname: '/results',
            state: { results: this.state.results }
          }}/>
        }
      </div>
    );
  }
}

export default Search;