輸入輸入后，React Router（Dom）v4重定向到其他路由

Question

當用戶在輸入字段上按Enter時，我試圖重定向到新路線。 我有一個標題和搜索組件，希望在每個頁面上呈現。 我發現了使用重定向組件，withRouter組件，使用上下文以及可能將歷史對象傳遞到我的Search組件（輸入字段所在的位置）的不同用例。 任何幫助，將不勝感激..

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;

Answer 1

在您的handleSubmit函數中嘗試：

this.props.history.push('/movie'); // or whatever

編輯：您可能還需要綁定此

onKeyPress={this.handleSubmit.bind(this)}

然后對要傳遞給路線的組件執行此操作

const HomePage = () => {
    return <Home props={this.props} />
}

...

<Route ... component={HomePage} />

Answer 2

我遇到的所有其他解決方案都因為新版本而過時了。

請參閱React Router V4 /重定向 。

我終於通過執行以下操作解決了該問題；

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... 
       )

我不知道這是否是很好的解決方案之一，但不幸的是我無法以其他任何方式使它起作用。

Answer 3

您可以在此處查看有關您的案例的更多信息https://gist.github.com/verticalgrain/195468e69f2ac88f3d9573d285b09764