Reacthistory.push在Home組件中不起作用

我正在對我的 React 專案實施身份驗證，并嘗試在我的 Home 組件中使用登錄表單。這就是我的 Home 組件與附加的 Login 組件的外觀。

import Login from './Login'
import * as React from 'react';
import Box from "@material-ui/core/Box";

const Home = () => {
  return (
    <div>
      <Box sx={{
        width: 600,
        height: 150,
        backgroundColor: 'lightgrey',
        borderRadius: 16
      }}>
        {<h1>Welcome to our Podcast App</h1>}
        {<h2>Feel free to share your favorites or have fun listening to the ones available.</h2>}
      </Box><br/>
        < Login />
    </div>
  );
};

export default Home;

問題是，我想將我的用戶重定向到播客頁面，但history.push無法正常作業。這就是 Login 組件的外觀。

import React from "react";
import { connect } from "react-redux";
import { loginUser } from "../actions/index";
import Button from "@material-ui/core/Button";
import { Box } from "@material-ui/core";

class Login extends React.Component {
  state = {
    email: "",
    password: "",
    error: false
  };

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    const { email, password } = this.state;
    this.props
      .dispatchLoginUser({ email, password }) 
      .then(() => this.props.history.push('/podcasts')) 
      .catch(() => this.setState({ error: true }));   
  };
  

  render() {
    return (
      <Box sx={{ p: 2, border: '1px solid grey' }}>
        <form onSubmit={this.handleSubmit} >
          <h3>Log In</h3>
          <p>{this.state.error && "Invalid email or password"}</p>
          <fieldset>
            <label htmlFor='email'>
              Email:
            </label>
            <input
              type='text'
              name='email'
              id='email'
              onChange={this.handleChange}
              value={this.state.email}
            />
          </fieldset>
          <fieldset>
            <label htmlFor='password'>
              Password:
            </label>
            <input
              type='password'
              name='password'
              id='password'
              onChange={this.handleChange}
              value={this.state.password}
            />
          </fieldset><br/>
          <Button variant="contained" size="small" color="inherit" type='submit'>Log In</Button>
        </form>
      </Box>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    dispatchLoginUser: (credentials) => dispatch(loginUser(credentials))
  };
};

export default connect(null, mapDispatchToProps)(Login);

如果我嘗試從登錄頁面登錄，它將起作用。但它不適用于主頁。我還嘗試向我的專案添加歷史記錄，就像另一篇文章建議的那樣，但它仍然不起作用。這是代碼：

//history.js
import { createBrowserHistory } from 'history';

export default createBrowserHistory();

//index.js
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

ReactDOM.render(
  <Provider store={ store }>
    <Router history={history} >
      <App />
    </Router>
  </Provider> 

//The routes in App.js
<Route exact path='/' component={Home}/>
<Route exact path='/signup' component={Signup} />
<Route exact path='/login' component={Login} />  

是否可以history.push從 Home 組件進行作業？任何建議都將受到歡迎。謝謝你們。

uj5u.com熱心網友回復：

是否可以從 Home 組件使 history.push 作業？

是的，絕對是。您只需要從組件中的props物件中解構它Home。為此，Home組件實際上需要有一個已定義/宣告的props物件。

const Home = (props) => {
  // access props.history
  return (
    ...
    <Login history={props.history} />
    ...
  );
};

或者

const Home = ({ history }) => {
  // access history
  return (
    ...
    <Login history={history} />
    ...
  );
};

Home是一個函陣列件，所以它也可以使用useHistory鉤子并傳遞它。

const Home = () => {
  const history = useHistory();

  return (
    ...
    <Login history={history} />
    ...
  );
};

uj5u.com熱心網友回復：

在 react-router-dom 版本 6 中， useHistory()被替換為useNavigate()

import {useNavigate} from 'react-router-dom'; 

const navigate = useNavigate(); 
navigate('/home')

標籤：

上一篇：身份服務器4-無法對用戶進行身份驗證

下一篇：IdentityServer4-對用戶進行身份驗證的RESTAPI請求