当用户在输入字段上按Enter键时,我正在尝试重定向到新路由。 我有一个我希望在每个页面上呈现的标题和搜索组件。 我找到了不同的用例,包括使用Redirect组件,withRouter组件,使用上下文,以及可能将历史对象传递给我的搜索组件,这是输入字段所在的位置。任何帮助将不胜感激..
App.js(主要组成部分)
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Title from './Title';
import Search from './Search';
import Home from './Home';
import Movie from './Movie';
class App extends Component {
render() {
return (
<div>
<Title />
<Search />
<Router>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/movie' component={Movie} />
</Switch>
</Router>
</div>
);
}
}
export default App;
Search.js(输入组件)
import React, { Component } from 'react';
import './Search.css';
class Search extends Component {
constructor(props) {
super(props);
this.state = {
value: ""
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(e) {
if (e.key === 'Enter') {
// TODO redirect user to '/movie'
}
}
render() {
return (
<input type="text" id="searchTitle" placeholder="Search for a movie" onChange={this.handleChange} onKeyPress={this.handleSubmit} value={this.state.input} />
)
}
}
export default Search;
答案 0 :(得分:4)
在handleSubmit函数中尝试:
this.props.history.push('/movie'); // or whatever
编辑: 你可能也需要绑定它
onKeyPress={this.handleSubmit.bind(this)}
并对您传递到路线中的组件执行此操作
const HomePage = () => {
return <Home props={this.props} />
}
...
<Route ... component={HomePage} />
答案 1 :(得分:1)
我遇到的所有其他解决方案都因新版本而过时。
请参阅React Router V4 / Redirect。
我终于通过以下方式解决了这个问题;
import { Redirect } from 'react-router-dom'
然后在我的州,我宣布'提交'为假。
postForm(e){
e.preventDefault();
this.setState({
submitted : true
})
}
当您在渲染方法中返回时,它将检查您的状态和
render(){
if (this.state.submitted) {
return (
<Redirect to="/done"/>
)
}
return (
something else...
)
我不知道这是否是一个很好的解决方案,但遗憾的是我无法以任何其他方式使用它。
答案 2 :(得分:0)
您可以在此处查看以获取有关您的案例https://gist.github.com/verticalgrain/195468e69f2ac88f3d9573d285b09764
的更多信息