简体   繁体   中英

Using react-router-dom with an input

I want to redirect to use react-router-dom to re render what I write into my input when I submit, but I don't know how.

This is my input:

<form
    action="#"
    onSubmit={(e) => {
        e.preventDefault();
        dispatch(pokemonToSearch(value.toLowerCase()));
        setValue("");
    }}
>
    <div>
        <input
            value={value}
            type="text"
            onChange={(e) => setValue(e.target.value)}
        />
        <button type="submit">Search</button>
    </div>
</form>

I have a simple list, when I click one item, it renders the pokemon I clicked, that's works. But I want the same to happen when I search for one.

My searchbar is above my list, like this:

<SearchBar />
    <div className="container px-4 ">
        <Switch>
            <Route exact path="/">
                <PokemonList />
                <ViewMore />
            </Route>
            <Route exact path="/pokemon/:nameLink">
                <Pokemon />
            </Route>
        </Switch>
    </div>

I use a useEffect to fetch the specific data:

useEffect(() => {
    dispatch(getPokemonData(nameLink));
}, [dispatch, nameLink]);

Nevermind, I just solved it. What I did:

First imported useHistory:

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

Then created a constant with it:

const history = useHistory();

Then push the url I want onSubmit:

<form
    onSubmit={(e) => {
        e.preventDefault();
        dispatch(pokemonToSearch(value.toLowerCase()));
        history.push(`/pokemon/${value}`); // this right here
        setValue("");
    }}
>
</form>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM