history.push 没有将我重定向到主页

Question

所以我有一个注册组件，所以当我尝试在开发工具/网络中注册时，我正在创建用户。但由于某种原因，它并没有像预期的那样把我推到家里，我认为问题可能出在history.push("/"); 上。我尝试了很多东西，但我似乎无法弄清楚

应用程序

function App() {


   const logoutHandler = () =>{
        localStorage.removeItem("authToken");
        history.push("/")
    }
  const [loading, setLoading]= React.useState(true)

  useEffect(()=>{
    setTimeout(() => {  
      setLoading(false)
    }, 3000);
    
  },[])
  return (
    <div >
      {!loading ?(      
      <Router>
        <Switch>
           <Route path='/cart'>
            <Header />
            <Cart/>
          </Route>       
        <Route path='/searchbook/:booksKey'>
         <Search />   
        </Route> 
        <Route path='/book/:bookKey'>
         <Header />
         <Book />      
        </Route> 
      
        <Route path='/forgotpassword'>
       <ForgotPassword />
        </Route> 
        <Route path='/passwordreset/:resetToken'>
        <ResetPassword />
        </Route> 
       <Route exact path='/register'>
        <Register />
        </Route> 
        <Route path='/login'>
         <Login />
        </Route> 
         <Route path='/'>
         <Header />
         <Home />      
        </Route> 
        </Switch>
      </Router>
       ):(
       <>
      <BookAnimation />
      </>
      )}
    </div>
  );
}

export default App;

注册

import { useState, useHistory  } from "react";
import axios from "axios";
import { Link,  } from "react-router-dom";


const Register = () => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmpassword, setConfirmPassword] = useState("");
  const [error, setError] = useState("");
  const history = useHistory()
  const registerHandler = async (e) => {
    e.preventDefault();
  
    const config = {
      header: {
        "Content-Type": "application/json",
      },
    };

    if (password !== confirmpassword) {
      setPassword("");
      setConfirmPassword("");
      setTimeout(() => {
        setError("");
      }, 5000);
      return setError("Passwords do not match");
    }

    try {
      const { data } = await axios.post(
        "http://localhost:5000/api/auth/register",
        {
          username,
          email,
          password,
        },
        
        config
        
      );
    
      localStorage.setItem("authToken", data.token);

      history.push("/");
    } catch (error) {
      if (error.response) {
        setError(error.response.data.error);
      }
      setTimeout(() => {
         setError("");
      }, 5000);
    }
  };

  return (
    <div className="register-screen">
      <form onSubmit={registerHandler} className="register-screen__form">
        <h3 className="register-screen__title">Register</h3>
        {error && <span className="error-message">{error}</span>}
        <div className="form-group">
          <label htmlFor="name">Username:</label>
          <input
            type="text"
            required
            id="name"
            placeholder="Enter username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div className="form-group">
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            required
            id="email"
            placeholder="Email address"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div className="form-group">
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            required
            id="password"
            autoComplete="true"
            placeholder="Enter password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <div className="form-group">
          <label htmlFor="confirmpassword">Confirm Password:</label>
          <input
            type="password"
            required
            id="confirmpassword"
            autoComplete="true"
            placeholder="Confirm password"
            value={confirmpassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          />
        </div>
        <button type="submit" className="btn btn-primary">
          Register
        </button>

        <span className="register-screen__subtext">
          Already have an account? <Link to="/login">Login</Link>
        </span>
      </form>
    </div>
  );
};

export default Register;

Answer 1

Switch 将渲染与该位置匹配的第一个子 <Route> 并将停止寻找匹配项。根据您的情况，第一场比赛将是<Route path='/cart'>。

将<Route path='/'> 移动到路由定义的顶部。加exact：

<Route exact path='/'>

Answer 2

我认为第一个答案的问题是他们试图从react-router 解构useHistory，而不是react-router-dom。

您的代码正试图从react 解构useHistory（这将不起作用，因为useHistory is not a native react hook。）

您可以尝试按以下方式使用钩子吗（由react-router-dom docs 提供）：

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

const Register = () => {
  // ... your other state variables ... 

  let history = useHistory();

  const headToHome() {
    history.push("/");
  }

  return (
    <button type="button" onClick={headToHome}>
      Go home
    </button>
  );
}

并将您的根路径定义为确切路径：

<Route exact path="/" />

Answer 3

你需要使用useHistory钩子：

import { useHistory } from 'react-router-dom'

function MyComponent() {
  const routerHistory = useHistory()
}

要导航到特定路线，请使用：

routerHistory.push('/')

我倾向于不调用变量 history，因为 javascript 已经有一个 history 变量存储在全局范围内。