我目前正在开发我的第一个reactjs应用程序,并且难以使用react-router-dom从Search组件导航到Results组件。
搜索组件接受来自用户的条目,使用axios执行获取请求并更新其结果状态。
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。
是否可以使用React Router将结果从“搜索”组件转发到“结果”组件?我也对不基于React Router的其他解决方案持开放态度。
您是否签出了重定向组件?这是一个基本概念(无需实际测试),可以帮助您入门。显然,您必须添加更多代码才能使其正常工作。
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;