使用 React Router 有条件地重定向

达马杜曼

我想在检查条款后转到带有链接的页面。但没有任何反应。

应用程序.tsx

   import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from "./Components/Login";
import "./styles/index.scss";

import { Suspense } from "react";
import ToDoScreen from "./Pages/ToDoScreen";
function App() {
  return (
    <Router>
      <div className="App">
        <Suspense fallback={<h2>Loading...</h2>}>
          <Switch>
            <Route exact path="/" component={Login} />
            <Route path="/home" component={ToDoScreen} />
          </Switch>
        </Suspense>
      </div>
    </Router>
  );
}

export default App;

当我想要的按钮被点击时，它首先检查然后重定向到页面。

<button onClick={onClick}>Login</button>

点击：

 const onClick = () => {
    if (inputs.name.length < 3 || inputs.lastname.length < 3) {
      alert("name/lastname must be at least 3 characters");
    } else {
      <Link to="/home"></Link>;
    }
  };

舒巴姆·哈特里

链接组件应该被呈现，而不是在事件处理程序中返回或使用。要动态更新路线，您应该history.push改用

import { useHistory } from 'react-router-dom';
function MyComp() {
   const history = useHistory();
   const onClick = () => {
    if (inputs.name.length < 3 || inputs.lastname.length < 3) {
      alert("name/lastname must be at least 3 characters");
    } else {
      history.push("/home");
    }
  };
   
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。