createBrowserhistory from history npm Url changes but not component React-redux

Question

Having same version for react and react-dom "react": "^18.2.0", "react-dom": "^18.2.0" and history is latest "history": "^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 (....);

Calling handleSubmit from singIn button

 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));
      });
  };
}

Using history.push("/home") this only Url replaced not component loading so please provide the solution with using latest npm version(if any) or suggest ready template ASAP.

Answer 1

The react-router-dom@6 BrowserRouter doesn't take a history prop.

BrowserRouter

declare function BrowserRouter(
  props: BrowserRouterProps
): React.ReactElement;

interface BrowserRouterProps {
  basename?: string;
  children?: React.ReactNode;
  window?: Window;
}

If you want to use a custom history object then you should import the HistoryRouter and pass the history prop for the type of history object you are creating for your app.

HistoryRouter

declare function HistoryRouter(
  props: HistoryRouterProps
): React.ReactElement;

interface HistoryRouterProps {
  basename?: string;
  children?: React.ReactNode;
  history: History;
}

Ensure that your entire app is importing and referencing the same single history object instance that is passed to the router.

Create the history object

import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default history;

Import the HistoryRouter and the custom history object.

...
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));
      });
  };
}