使用带有输入的 react-router-dom

Posted 2023-02-19

【中文标题】使用带有输入的 react-router-dom

【英文标题】：Using react-router-dom with an input

【发布时间】：2021-08-03 04:50:54

【问题描述】：

我想重定向以使用 react-router-dom 重新呈现我在提交时写入输入的内容，但我不知道如何。

这是我的输入：

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

我有一个简单的列表，当我单击一个项目时，它会呈现我单击的口袋妖怪，这是可行的。但我希望在搜索时也能发生同样的情况。

我的搜索栏在我的列表上方，如下所示：

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

我使用 useEffect 来获取特定数据：

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

【参考方案1】：

没关系，我刚刚解决了。我做了什么：

首次导入的useHistory：

import  useHistory  from "react-router-dom";

然后用它创建一个常量：

const history = useHistory();

然后push我要的url onSubmit：

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