React js: react router not redirecting

Question

I'm noob learning react and I'm not sure why this isnt working properly. I want to redirect to /search when I press 'Enter' but for some reason its not working. What is the correct way to redirect to different page?

function App(){

    const [inputVal, setInputVal] = useState('');
    const [submitted, setSubmitted] = useState(false);

    function handleInput(e) {
        const query = e.target.value;
        setInputVal(query);
    }

    function handleKeyDown(e) {
        if (e.key === 'Enter') {
            setSubmitted(true);
            console.log(submitted);
            console.log(inputVal);
        }
    }

    return (
        <div className='App'>
            <div>
                <h1>Movie</h1>
                <input
                    onKeyDown={handleKeyDown}
                    onChange={handleInput}
                    placeholder='Search...'
                />
            </div>

            <Router>
                <Switch>
                    <Route path='/' exact component={Home} />
                    {submitted && <Redirect to='/search' />}
                    <Route path='/search' component={Search} />
                    <Route path='/details/:id' component={Detail} />
                </Switch>
            </Router>
        </div>
    );
}

It's because of the exact parameter on the route before it on Home. — Josh Birdwell, Feb 10 '21 at 00:48
You need to push the path to the router history: https://stackoverflow.com/questions/51393153/react-routing-redirect-onclick — Homa, Feb 10 '21 at 00:53

score 0 · Answer 1 · answered Feb 10 '21 at 00:53

I would suggest using the history to programmatically navigate to search. You will likely want to pass the inputVal as a query parameter so you have access to it in that component.

import { useHistory } from 'react-router-dom';

function App() {
    const history = useHistory();
    const [inputVal, setInputVal] = useState('');

    function handleInput(e) {
        const query = e.target.value;
        setInputVal(query);
    }

    function handleKeyDown(e) {
        if (e.key === 'Enter') {
            // You can put the inputVal as a query parameter
            history.push(`/search?search=${inputVal}`);
        }
    }

    return (
        <div className="App">
            <div>
                <h1>Movie</h1>
                <input
                    onKeyDown={handleKeyDown}
                    onChange={handleInput}
                    placeholder="Search..."
                />
            </div>

            <Router>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/search" component={Search} />
                    <Route path="/details/:id" component={Detail} />
                </Switch>
            </Router>
        </div>
    );
}

thanks for going the extra mile! Unfortunately it didn't work for me. I got an error TypeError: history is undefined. Router i'm using is V 5.2.0. I looked up the error and it seems like useHistory is not included with the latest version. I may have to downgrade to v3 or something which i have no idea how lol — , Feb 10 '21 at 03:28
https://reactrouter.com/web/api/Hooks/usehistory should be in the latest version. See the docs here. — Josh Birdwell, Feb 10 '21 at 04:12
still didnt work. Take a look at this and i still got the same result. https://stackoverflow.com/questions/66155448/react-js-react-router-not-redirecting-when-button-is-being-clicked — , Feb 11 '21 at 13:12

score 0 · Answer 2 · answered Feb 10 '21 at 00:54

It always picks the first in your switch so because you are on the home page likely it will never see anything below that thats why it does not redirect you. You either need to put the redirect above the home route or try using the "history" function from react-router that will require you to set it up at the root level to use but then you can do

function handleKeyDown(e) {
    if (e.key === 'Enter') {
        history.push('/search')
        console.log(submitted);
        console.log(inputVal);
    }
}

Just found out that useHistory is not comparable with the latest router version. I'm not even sure how to solve this anymore. I have been stuck for 1 day. I think I might have downgrade the router version to make it work. — , Feb 10 '21 at 03:32

React js: react router not redirecting

2 Answers2