[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

[Jamison1]

Found this explanation about the change in accessing history in another issue about RR upgrade from v6.3 to v6.4. Still working through this issue!

[brophdawg11]

Hey folks! I'm centralizing the info around unstable_HistoryRouter over in https://github.com/remix-run/react-router/issues/9422#issuecomment-1301182219 if you want to head over there for an explanation of where things stand!

[fresonn]

There is no official solve of this issue still, why?

[ryanflorence]

React itself is the reason we discouraged navigating outside of the React tree due to UI sharding (a problem with React's concurrent mode and suspense where it would get out of sync with an external store like history).

To unblock our work in React Router, and to make sure we were forward compatible with React, we discouraged this use case and waited for the React team to provide a solution. However, we still provided a path forward for you with unstable_HistoryRouter.

It wasn't until React 18 that useExternalSyncStore was introduced, which is the solution we needed. It's what we've implemented in 6.4 with the new routers that are data aware.

We have a long history of maintaining our old versions. After 8+ years we've only had two breaking releases. Even v3 still gets patches. You can stay on v5 if things in v6 aren't worth the development effort to upgrade. It will be maintained.

If the features in v6 look interesting to you, Matt has outlined some options in the other issue.

[ryanflorence]

Conversation is locked so that further questions happen on the other issue :)

https://github.com/remix-run/react-router/issues/9422#issuecomment-1301182219

[ryanflorence]

Also, if you're on unstable_HistoryRouter, this should be a fairly straightforward change to your code to navigate outside of the react tree:

https://github.com/remix-run/react-router/issues/9422#issuecomment-1302564759