reactjs - React 路由器不导航

Question

我在导航栏中有一个 signIn 和 signUp。

我的“/”路径呈现 SignUp 组件，SignUp 组件有一个带有输入和按钮的表单。

提交表单或单击按钮时，我应该被带到(“/signin”)登录页面，该页面呈现我的登录组件。

但是，我的问题是，一旦我单击按钮或提交表单，它仍然停留在 ("/") 注册页面中并且不会导航到登录页面 ("/signin")

代码:

import { Redirect } from "react-router-dom";

function Signup() {
  const handleClick = () => {
    <Redirect to="/signin" />;
  };
  return (
    <div>
      <form>
        <label>
          Enter Mobile Number
        </label>
        <input />
        <button onClick={handleClick} >
          Get OTP
        </button>
      </form>
    </div>
  );
}

export default Signup;

App.js

function App() {
  return (
    <Router>
      <div>
        <Nav />
        <Switch>
          <Route exact path="/" component={Signup} />
          <Route path="/signin" component={SignIn} />
        </Switch>
      </div>
    </Router>
  );
}

我尝试解决的问题，

我包裹在按钮中:

<button onClick={handleClick} >
<Link to="/signin"> Get OTP </Link>
</button>

我也试过 onSumbit 形式而不是 onClick

Answer 1

一种方法是编写一个 Link 元素，例如:

import { Link } from "react-router-dom";
<Link to='/'>
  <button>
     Redirect to home
  </button>
</Link>

对于表单，你可以这样做:

import { history } from "react-router-dom";
<form onSubmit={() => history.push("/")}>
...
</form>