时间戳

首页 > 解决方案 > 使用参数反应重定向

reactjs - 使用参数反应重定向

问题描述

我正在做一个项目。我想执行一个重定向到另一个页面并传递参数的 onClick 方法。但是即使不传递参数，Redirect 方法也不起作用。谁能看看我的代码有什么问题？

在我的 app.js 中，我有切换路由的代码：

<Router>
   <Switch>
        <Route path= "/Home">
           <Home/>
          </Route>
          <Route path= "/Projects">
           <Projects/>
          </Route>
          <Route path= "/Results">
           <Results/>
          </Route>
    </Switch>
 </Router>

在我的组件中，我有：

function Search() {
  const [searchTerm, setTerm] = useState("");

  function handleChange(event) {
    setTerm(event.target.value);
  }

  function handleClick(event) {

  if (searchTerm.length > 0) {
    return(
 
      <Redirect
      to={{
        pathname: "/Results",
        state: {searchTerm}
      }}
    />
    
    );
  }

  event.preventDefault();
}


return (
  <div>
    <nav class="navbar navbar-light bg-light">
      <div class="container-fluid justify-content-end">
        <form class="d-flex">
          <input onChange={handleChange} value={searchTerm} class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
          <button onClick={handleClick} class="btn btn-outline-success">Search</button>
        </form>
      </div>
    </nav>
  </div>
);

}

标签： reactjsredirect

解决方案

Redirect如果您从调用函数中返回它，它将不起作用。如果你想进入/results页面，Redirect你可以创建一个新状态：

const [redirect, setRedirect] = useState(false);

并将此状态设置为true如果输入值满足所需条件searchTerm.length > 0。然后，您可以使用条件渲染添加Redirect到您的 return 语句

function handleClick() {

  if (searchTerm.length > 0) {
    setRedirect(true)
  }
}

return (
    <>
      {redirect && (
        <Redirect
          to={{
            pathname: "/Results"
          }}
        />
      )}
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <button onClick={handleClick}>Search</button>
    </>
  );

使用重定向的工作示例

第二种方法是使用钩子useHistory()：

const history = useHistory();

function handleClick() {

  if (searchTerm.length > 0) {
    history.push("/Results");
  }
}

useHistory 示例

推荐阅读