React 路由器无法导航答案

【问题标题】：React router isn't navigatingReact 路由器无法导航
【发布时间】：2021-06-01 13:24:50
【问题描述】：

我在导航栏中有一个 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

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案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>

【讨论】：

【解决方案2】：

您需要将按钮包装在链接中：

<Link to='/'>
  <button>
     Redirect to home
  </button>
</Link>

并从 'react-router-dom' 添加 Link 组件：

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

【讨论】：

谢谢，这行得通！我会接受这个答案。如果我需要在表单上使用 onSubmit 而不是 onClick 按钮怎么办？我猜想包裹整个表单不起作用
这种情况下可以使用history.push(path);
在这种情况下使用有效吗？ @guilhermevictorramalhonatal
是的。但你需要一个条件来触发重定向。
快速从主页重定向到仪表板页面：link