I am trying to redirect to new route when user presses enter on input field. I have a Title and Search ponent that I want rendered on every page. I have found different use cases with using Redirect ponent, withRouter ponent, using context, and possibly passing history object to my Search ponent which is where the input field lives. Any help would be appreciated..

App.js (main ponent)

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='/' ponent={Home} />
                            <Route path='/movie' ponent={Movie} />
                        </Switch>
                </Router>
            </div>
        );
    }
}

export default App;

Search.js (input ponent)

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;

I am trying to redirect to new route when user presses enter on input field. I have a Title and Search ponent that I want rendered on every page. I have found different use cases with using Redirect ponent, withRouter ponent, using context, and possibly passing history object to my Search ponent which is where the input field lives. Any help would be appreciated..

App.js (main ponent)

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='/' ponent={Home} />
                            <Route path='/movie' ponent={Movie} />
                        </Switch>
                </Router>
            </div>
        );
    }
}

export default App;

Search.js (input ponent)

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;

• javascript
• reactjs
• react-router-dom

• The Search ponent needs access to the history object provided by React Router. You can use the withRouter HOC. Give it the Search ponent then you'll have access to it. Then push a new url like you normally would. – KA01 Commented Jun 14, 2017 at 4:11
• So what I did was render Search ponent on each route (Home and Movie) in order to have access to history prop provided by Route ponent. Then instead of using <Route path='/' ponent={Home} I used <Route path='/' render={() => <Home {...props} />} />. Inside Home ponent I then had access to this.props.history and could push the route to redirect – Chuck Reynolds Commented Jun 15, 2017 at 19:11
• Yea that's another way to do it. It requires the parent ponent to have the history object though. – KA01 Commented Jun 15, 2017 at 19:12
• My initial problem was trying to render Search outside of any route to have default ponents wherever the user went – Chuck Reynolds Commented Jun 15, 2017 at 19:14

3 Answers 3

inside your handleSubmit function try:

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

edit: you'll probably need to bind this as well

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

and do this to the ponent you're passing into the route

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

...

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

All other solutions I came across were outdated because of the new version.

Refer to React Router V4 / Redirect.

I have finally solved the problem by doing the following;

import { Redirect } from 'react-router-dom'

And then in my state I have declared 'submitted' as false.

postForm(e){
    e.preventDefault();
    this.setState({
      submitted : true
    })
  }

When you are returning inside your render method it is going to check with your state and

render(){
    if (this.state.submitted) {
      return (
        <Redirect to="/done"/>
      )
    }
    return ( 
         something else... 
       )

I don't know if this is one of the good solutions but unfortunately I couldn't get it to work in any other way.

You can see here to get more information in your case https://gist.github./verticalgrain/195468e69f2ac88f3d9573d285b09764