Question

问题：

在我的react应用程序中，我正在使用浏览器历史记录对象。这是我的index.js文件。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/app/App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';
// import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <Provider store={store}>
            <App />
        </Provider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint
reportWebVitals(console.log);
// serviceWorker.unregister();

这是我的App.js文件。

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import refreshToken from '../../store/actions/refreshToken';
import routes from '../../routes';
import history from '../../utils/history'

const App = () =>{
    refreshToken();
    return (
        <Router history={history}>
          <Switch>
            {routes.map(
              (route, index) => (
                <Route
                  key={index}
                  exact={route.exact}
                  path={route.path}
                  component={route.layout(route.component, route.breadcrumbs)} />
              )
            )}
          </Switch>
        </Router>
    )
}

export default App;

这是我的history.js文件。

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

这是我的路线文件。

import DefaultLayout from './layouts/DefaultLayout';
import LoginLayout from './layouts/LoginLayout';
import LoginView from './views/login/Login';
import SearchView from './views/search/Search';

const routes = [
    {
        path: `${process.env.PUBLIC_URL}/`,
        exact: true,
        layout: LoginLayout,
        component: LoginView,
    },
    {
        path: `${process.env.PUBLIC_URL}/search`,
        exact: true,
        layout: DefaultLayout,
        component: SearchView,
    },
]

export default routes;

这就是我在登录组件中使用历史记录的方式。

import React, { useEffect,useState } from "react";
import "./login.css";
import { connect } from "react-redux";
import { Formik, Form } from "formik";
import * as Yup from "yup";
import { Button, Alert } from "react-bootstrap";
import { useHistory,withRouter } from 'react-router-dom';
import { loginActions } from "../../store/actions";
import logo from "../../assets/img/logo.png";
import Toast from '../../components/toast/ToastView';

const handleSubmit = (values, userLogin) => {
  const userdata = {
    email: values.username,
    password: values.password,
  };
  userLogin(userdata);
};

const Login = (props) => {
  const [showToast, setShowToast] = useState(false);
    const [showErrorToaster, setShowErrorToaster] = useState(false);
  useEffect(() => {
    if (props.success) {
      setShowToast(true);
      setTimeout(()=>{
        setShowToast(false)
        props.history.push(`${process.env.PUBLIC_URL}/search`);
      },2000)
    }
    if(props.error){
      setShowErrorToaster(true);
    }
  }, [props.error, props.success,props.history]);
  return (
    <>
     {/*my other codes8*/}
    </>
  );
};

const mapStateToProps = (state) => {
  return {
    //my state code
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    //my action code
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Login));

这里发生的是成功登录后正在更新浏览器中的URL，但未呈现组件。我必须再次刷新。因此，我也在以下给出答案的问题中寻找答案。但是唯一可行的解决方案是在浏览器历史记录中添加强制刷新功能。但是它将再次完全加载分量增益。因此，有人可以指导我解决此问题而无需添加强制刷新功能吗？我关注的问题在这里。 how to access history object in new React Router v4。https：//stackoverflow.com/questions/64534429/history-push-is-changing-url-but-not-rendering-component-in-react。https：//stackoverflow.com/questions/ 43279135 / reactjs-router-v4-history-push-not work。如果有人指导我这样做真的很有帮助。谢谢

React history.push（）正在更新URL，但不呈现页面？

0 个答案: