[Bug]: How to navigate outside React context in v6?

[hacker0limbo]

What version of React Router are you using?

v6

Steps to Reproduce

In v6 docs, it mentions that we can use useNavigate() hook to do navigation, similar to in v5 we directly use useHistory() hook. However I am not sure how we can do the navigation outside React context in v6, cause in v5, your can manually provide a history object as a prop to Router component, and reference it in other places even it is not inside React context:

// myHistory.js
import { createBrowserHistory } from "history";

const customHistory = createBrowserHistory();

export default  customHistory

// otherFile.js
import history from './myHistory.js'

function doSomething() {
  history.push('/xxx')
}

But how we could achieve the same functionality in v6? I have see a few posts asking similar questions on stackoverflow, but currently there is no solution provided:

• React Router v6.0.0-alpha.5 history prop removal - navigating outside of react context
• React Router ^6.0.0-beta.0 history prop removal - navigating outside of react context

Expected Behavior

A common scenario from my experience was consider i have a redux thunk action creator that doing signup logic, and after sending request if success i wish the page can be navigate to home page:

// signupActions.js

export const signupRequest = (userData) => {
  return dispatch => {
    dispatch(signupPending())

    return axios.post('/api/user', userData)
      .then(res => dispatch(signupSuccess()))
      .then(() => {
        // doing navigation
        // navigate('/')
      })
      .catch(error => dispatch(signupFailure(error.message)))
  }
}

The action is outside React context so i am not able to use useNavigate() hook, Although i can do some refactor and move some logic to the React component, but i prefer to keep most business logic inside action since i wish the component are more responsible for UI rendering.

Actual Behavior

As mentioned above

[github-actions]

👋 @hacker0limbo, we use the issue tracker exclusively for bug reports and feature requests. However, this issue appears to be a support request. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out.
Please feel free to clarify your issue if you think it was closed prematurely.

[ryanflorence]

I'll make a quick guide on this, it's going to be a common question that we've already anticipated.

[ryanflorence]

Short answer: When your thunk is successful, change the state to something like "success" or "redirect" and then useEffect + navigate:

export function AuthForm() {
  const auth = useAppSelector(selectAuth);
  const dispatch = useAppDispatch();
  const navigate = useNavigate();

  useEffect(() => {
    if (auth.status === "success") {
      navigate("/dashboard", { replace: true });
    }
  }, [auth.status, navigate]);

  return (
    <div>
      <button
        disabled={auth.status === "loading"}
        onClick={() => dispatch(login())}
      >
        {auth.status === "idle"
          ? "Sign in"
          : auth.status === "loading"
          ? "Signing in..."
          : null}
      </button>
    </div>
  );
}

[evenfrost]

@ryanflorence it still doesn't answer the original question though, which is how to programmatically use navigation outside React components.

I believe it's not about one particular example that can be fixed with a different workflow, but a more general and pretty demanded functionality that is missing from the new version, if the library is to be called a 'fully-featured' one. Would love to see a guide on how it can be done.

Related: #8284, #7970.

[huczk]

I had this problem and created custom HistoryRouter like that:

import { Update } from "history";
import { useLayoutEffect, useReducer } from "react";
import { Router } from "react-router-dom";

// your local created history
import { history } from "./history";

const reducer = (_: Update, action: Update) => action;

export const HistoryRouter: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {
    action: history.action,
    location: history.location,
  });

  useLayoutEffect(() => history.listen(dispatch), []);

  return (
    <Router navigationType={state.action} location={state.location} navigator={history}>
      {children}
    </Router>
  );
};

[amazecc]

source code reference： https://github1s.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/index.tsx#L133

temporary plan, waiting for official support：

// history.ts

import { createBrowserHistory } from "history";

export const history = createBrowserHistory();

// BrowserRouter.tsx

import React from "react";
import { History } from "history";
import { BrowserRouterProps as NativeBrowserRouterProps, Router } from "react-router-dom";

export interface BrowserRouterProps extends Omit<NativeBrowserRouterProps, "window"> {
    history: History;
}

export const BrowserRouter: React.FC<BrowserRouterProps> = React.memo(props => {
    const { history, ...restProps } = props;
    const [state, setState] = React.useState({
        action: history.action,
        location: history.location,
    });

    React.useLayoutEffect(() => history.listen(setState), [history]);

    return <Router {...restProps} location={state.location} navigationType={state.action} navigator={history} />;
});