从历史NPM URL变化的CreateBrowserHistory，而不是组件React-Redux

Question

具有 React 和 React-dom 的相同版本 “反应”：“^18.2.0”， “ react-dom”：“^18.2.0”，历史是最新的 “历史”：“^5.3.0”，

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import SignInSide from "./components/mui/signIn/SignInSide";
import store from "./Store/Store";
import { Provider } from "react-redux";
import Dashboard from "./components/mui/Dashboard";
import history from './utils/history';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router history={history}>
        <Routes>
          <Route path="/login" element={<SignInSide />} />
          <Route path="/home" element={<Dashboard />} >
          </Route>
          <Route path="/" element={<App />} />
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>
);


 function SignInSide(props) {
          const handleSubmit = (event) => {
            event.preventDefault();
            const form = new FormData(event.currentTarget);
            let user = {
              email: form.get('email'),
              password: form.get('password')
            }
            console.log(user);
            props.signIn(user);
          };
    
      return (....);

从singin button调用handlesubmit

 import { createBrowserHistory } from "history";
export function LoginUser(LogInData) {
  let navigate = useNavigate;
  return (dispatch) => {
    dispatch(AuthActions.userSignIn());
    signInWithEmailAndPassword(auth, LogInData.email, LogInData.password)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        dispatch(AuthActions.userSignInSuccess(user));
        setPersistence(auth, browserSessionPersistence)
          .then(() => {
            return signInWithEmailAndPassword(
              auth,
              LogInData.email,
              LogInData.password
            );
          })
          .catch((error) => {
            // Handle Errors here.
            const errorCode = error.code;
            const errorMessage = error.message;
          });
        history.push("/home");
        // console.log(store);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        dispatch(AuthActions.userSignInFailed(error));
      });
  };
}

使用history.push（“/home”）此仅替换了不替换组件加载的URL，因此请使用最新的NPM版本（如果有）或尽快建议使用Ready模板。

。

Answer 1

React-Router-dom@6 browserrouter不采用历史记录 prop。

browserrouter

 声明功能browserrouter（
  道具：browserrouterprops
）：反应。

接口browserrouterprops {
  Basename？：字符串；
  儿童？：react.reeactnode;
  窗口？：窗口；
}
 

如果要使用自定义历史对象，则应导入“历史记录” 并传递历史 prop for您为应用程序创建的历史记录对象类型。

历史记者

 声明功能历史记录（
  道具：历史记录
）：反应。

接口history routerprops {
  Basename？：字符串；
  儿童？：react.reeactnode;
  历史：历史；
}
 

确保您的整个应用程序正在导入并引用传递给路由器的相同单个历史>对象实例。

创建历史记录对象

import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default history;

导入historyRouter和自定义历史对象。

...
import { HistoryRouter as Router, Route, Routes } from "react-router-dom";
...
import history from './utils/history';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router history={history}>
        <Routes>
          <Route path="/login" element={<SignInSide />} />
          <Route path="/home" element={<Dashboard />} >
          </Route>
          <Route path="/" element={<App />} />
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>
);

...

import history from './utils/history';

export function loginUser(logInData) {
  return (dispatch) => {
    dispatch(AuthActions.userSignIn());
    signInWithEmailAndPassword(auth, logInData.email, logInData.password)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        dispatch(AuthActions.userSignInSuccess(user));

        setPersistence(auth, browserSessionPersistence)
          .then(() => {
            return signInWithEmailAndPassword(
              auth,
              logInData.email,
              logInData.password
            );
          })
          .catch((error) => {
            // Handle Errors here.
            const errorCode = error.code;
            const errorMessage = error.message;
          });

        history.push("/home");
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        dispatch(AuthActions.userSignInFailed(error));
      });
  };
}