reactjs - React 路由器无法导航

Question

我在导航栏中有一个登录和注册。

我的“/”路径呈现 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;

应用程序.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

标签： reactjsreact-routerreact-router-dom

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>