検索フォームからreactjsの結果ページへのリダイレクト

Question

私は現在、最初のreactjsアプリケーションを開発しており、react-router-domを使用して検索コンポーネントから結果コンポーネントにナビゲートするのが困難です。

検索コンポーネントは、ユーザーからのエントリを受け取り、axiosでget要求を実行し、結果の状態を更新します。

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; 

結果は現在、検索コンポーネントの直下に表示されますが、私は別のURLで新しいページに結果をリダイレクトしたいと思います。両方のページは構造やスタイルがまったく異なり、異なるURLを指している必要があるため、異なる必要があります。

反応ルータを使用して、検索コンポーネントの結果を結果コンポーネントに転送することはできますか？私は反応ルータに基づいていない他のソリューションにもオープンしています。

Answer 1

Redirectコンポーネントを確認しましたか？基本的なアイデアは、実際にテストすることなく、あなたが始めなければならないことです。あなたは明らかにそれを働かせるためにいくつかのコードを追加する必要があります。

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;