如何在使用 react 的 redux 操作后重定向到不同的页面

Question

我正在构建一个 Web 应用程序，我希望用户在能够登录之前确认他们的电子邮件。我正在使用 redux 并在确认用户时执行 redux 操作。确认用户后，我想将用户重新路由到登录页面，超时为两秒。我已经通过 redux 操作来确认用户，以及我的 Confirm 组件和我的 App.js，因此您也可以看到路由。对于路由，我将所有路由包装在一个开关中。我真的很感激任何帮助，这对我来说真的意义重大，因为我非常坚持这一点。另外，如果您对我的代码有任何疑问，请告诉我。谢谢！

确认操作：

// Confirm User
export const confirm = (email, code) => async dispatch => {
  dispatch({
    type: CONFIRM_STARTED
  });
  try {
    const res = await axios.get(`/api/auth/confirm?email=${email}&code=${code}`)

    dispatch({
      type: CONFIRM_SUCCESS
    });


  } catch (err) {
    const errors = err.response.data.errors;

    if (errors) {
      errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
    }


    dispatch({
      type: CONFIRM_FAIL
    });
  }
}

确认组件：

import React from "react";
import { connect } from 'react-redux';
import { confirm } from '../../actions/auth';



class Confirm extends React.Component {
  componentDidMount() {
    //console.log("test ()");
    let email = new URLSearchParams(this.props.location.search).get("email");
    let code = new URLSearchParams(this.props.location.search).get("code");
    this.props.confirm(email, code);
  }



  render() {
    return (
      <div style={{ marginTop: 50 }}>
        <div>
          {this.props.confirmed}
          {this.props.confirming}
        </div>
        <div>
          We have confirmed your account, you may now login!
        </div>
      </div>
    )
  }
}


const mapDispatchToProps = dispatch => ({
  confirm: (email, code) => dispatch(confirm(email, code))
})

const mapStateToProps = (state, ownProps) => ({
  confirmed: state.auth.emailConfirmed,
  confirming: state.auth.emailConfirming
})

export default connect(mapStateToProps, mapDispatchToProps)(Confirm);

App.js

import React, { Fragment, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Landing from './components/layout/Landing';
import Login from './components/auth/Login';
import Register from './components/auth/Register';
import Alert from './components/layout/Alert';
// Redux
import { Provider } from 'react-redux';
import store from './store';
import { loadUser } from './actions/auth';
import setAuthToken from './utils/setAuthToken';
import Profile from './components/profile/Profile';
import PrivateRoute from './components/routing/PrivateRoute';
import CreateChat from './components/chat-form/CreateChat';
import JoinChat from './components/chat-form/JoinChat';
import Chat from './components/profile/Chat';
//import PostForm from './components/profile/PostForm';
import AboutChat from './components/profile/AboutChat';
import Post from './components/profile/Post';
import CommentForm from './components/profile/CommentForm';
import Confirm from './components/profile/Confirm';

import './App.css';

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = () => {
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);

  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <Navbar />
          <Route exact path="/" component={Landing} />
          <section className="container">
            <Alert />
            <Switch>
              <Route exact path="/register" component={Register} />
              <Route exact path="/login" component={Login} />
              <PrivateRoute exact path='/profile' component={Profile} />
              <PrivateRoute exact path='/create-chat' component={CreateChat} />
              <PrivateRoute exact path='/join-chat' component={JoinChat} />
              <PrivateRoute exact path='/chat/:id' component={Chat} />
              <PrivateRoute exact path='/comment-form/:chatId/:postId' component={CommentForm} />
              <PrivateRoute exact path='/chat-details/:id' component={AboutChat} />
              <PrivateRoute exact path='/post/:chatId/:postId' component={Post} />
              <Route exact path='/confirm' component={Confirm} />
            </Switch>
          </section>
        </Fragment>
      </Router>
    </Provider>
  )
};

export default App;

Answer 1

这是一个可能有用的简单示例。单击 Confirm 按钮强制 push 进入 history 堆栈。一旦您“登录”，超时开始运行，3 秒后您将使用 Redirect 组件和一些条件逻辑声明性地“注销”。随后您将返回登录页面。

Sandbox

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter,
  Route,
  Switch,
  useHistory,
  Redirect
} from "react-router-dom";

const rootElement = document.getElementById("root");

function Login() {
  const history = useHistory();
  return (
    <div>
      <p>Login</p>
      <button onClick={() => history.push("/auth")}>Confirm</button>
    </div>
  );
}

function Auth() {
  const [deleteAuth, setDeleteAuth] = useState(false);
  useEffect(() => {
    setTimeout(() => setDeleteAuth(true), 3000);
  }, []);
  if (deleteAuth) return <Redirect to="/" />;
  else return <div>Auth</div>;
}

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Login />
        </Route>
        <Route path="/auth">
          <Auth />
        </Route>
      </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  rootElement
);

如何在使用 react 的 redux 操作后重定向到不同的页面

How to redirect to a different page after a redux action using react

reactjs

react-router

redux-form

redux-saga

react-redux