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

}

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

标签： javascriptreactjsecmascript-6react-routerreact-hooks

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>
            );
      }