React：如何在输入的 onChange 事件上更改路由

Question

每当我在输入字段中输入文本并将输入值传递给<Search /> 组件路由时，我都想更改路由。这是我的输入字段。

<input type="search" value={searchInput} onChange={handleChange} placeholder="Search..." />

这是我创建的路线。

<Route path="/search/:searchInput">
   <Search />
</Route>

我已经处理了输入值，但是当我进入输入框时，我似乎不知道如何更改组件。你能帮我么。我也想将输入值传递给路由。

const [searchInput, setSearchInput] = useState("")

const handleChange = (e) => {
    e.preventDefault();
    setSearchInput(e.target.value)
}

这是我的导航组件：

const Navigation = () => {
  let history = createHashHistory();
  const [searchInput, setSearchInput] = useState("")

  const handleChange = (e) => {
    e.preventDefault();
    setSearchInput(e.target.value)
  }
  useEffect(() => {
    const params = new URLSearchParams();
    if (searchInput) {
      params.append("query", searchInput);
    } else {
      params.delete("query");
    }
    history.push({ search: params.toString() });
  }, [searchInput, history]);

  return (
    <Router>
      <div className='navigation'>
        <div className="right-content">
          <div className="search">
            <img style={{ padding: "2px" }} src={search} alt="search" />
            <input type="search" value={searchInput} onChange={handleChange} placeholder="Search..." />
          </div>
        </div>
      </div>

      <Switch>
        <Route path="/search" component={Search}>
        </Route>
      </Switch>
    </Router>
  )
}

export default Navigation

这是我的搜索组件：

const Search = () => {

    const value = new URLSearchParams(window.location.search).get("query");

    console.log(value)

}

我在导航中导入了搜索组件。我想在输入时进入搜索组件。

Answer 1

 import {Redirect} from "react-router-dom";    
 constructor(props) {
            super(props);
            this.state = {
                redirect: null,   
            }
      }  
      handleChange=(){
          this.setState({
           redirect: "/search/22"
          }); 
      }
      render() {
            if (this.state.redirect) {
                return <Redirect to={this.state.redirect} />
            }
            return (
                <div>
                 <input type="search" value={searchInput} onChange={handleChange} placeholder="Search..." />
                </div>
            );
      }

Answer 2

您可以使用查询参数来实现此目的。

当您更改输入时，您需要将输入值作为查询字符串附加到 url 。我们可以这样做。

 useEffect(() => {
    const params = new URLSearchParams();
    if (searchInput) {
      params.append("query", searchInput);
    } else {
      params.delete("query");
    }
    history.push({ search: params.toString() });
  }, [searchInput, history]);

一旦设置了查询参数，我们就可以从下面的选择组件中读取它。

 const value = new URLSearchParams(window.location.search).get("query");

工作示例 - Search Params Example