Redirect to Route from Saga using React Router v6

Question

I'm using redux saga & react router v6 and I want to redirect to a route from one of my sagas, is there a way to do it ?

Answer 1

There are multiple options

---

1 - Sending the navigate method as part of dispatched redux action

// component
const navigate = useNavigate()
dispatch({type: FOO, navigate})

// saga
yield takeEvery(FOO, function*(action) {
  action.navigate('/foo')
})

Pros:

• You are using the navigate method which is recommended by the react-router team
• The API is unlikely to change

Cons

• You have access to the navigate method only in specific sagas that received such action
• You have unserializable data in your actions

---

2 - Another option is to store the navigate method in some way. E.g. you can create a dummy react component that will get the navigate method through useNavigate hook and then store it in some "global" variable. See this SO answer for a possible solution: https://stackoverflow.com/a/70002872/2347716

This deals with the the cons from previous solution, but there are still some issues:

• You need your React tree to render at least once before you have access to the navigate method
• You are adding non-view complexity to your view layer by introducing the dummy component

---

3 - There is another solution, similar to what we had with react-router 5 that deals with the issues in the previous solution. It is to use the history object. It is not documented since its unstable, but there is a HistoryRouter implementation as part of the react-router-dom package. See https://github.com/remix-run/react-router/releases/tag/v6.1.1

import {unstable_HistoryRouter as HistoryRouter} from 'react-router-dom'
import { createBrowserHistory } from "history";
const history = createBrowserHistory()

// saga setup
sagaMiddleware.runSaga(rootSaga, history);

// react
<HistoryRouter history={history} />

The issue with this solution is that it is unstable because it might have some issues with some of React 18 features. Personally I prefer it since it solves everything else and we can deal with React 18 issues once its actually released and we know what they are.

Answer 2

My solution

// "HistoryRouter" implementation
import * as React from 'react'
import type {BrowserHistory} from 'history'
import {Router} from 'react-router-dom'

export interface HistoryRouterProps {
    history: BrowserHistory
    basename?: string
    children?: React.ReactNode
}

export function HistoryRouter({
    basename,
    children,
    history,
}: HistoryRouterProps) {
let [state, setState] = React.useState({
    action: history.action,
    location: history.location,
})

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

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


// Use
import {createBrowserHistory} from 'history'
export const history = createBrowserHistory()

ReactDOM.render(
   <HistoryRouter history={history}>
       <Routes>
           <Route path="login" element={<LoginComponent />} />
           <Route path="register" element={<RegisterComponent />} />
           <Route path="*" element={<HomeComponent />} />
      </Routes>
   </HistoryRouter>
, root)

// call history push in file saga
function* fetchLoginSaga(action: FetchLoginRequest) {
    try {
         yield call(history.push, "/home")
    } catch (e: any) {
    
    }
}

Answer 3

I present my solution to the problem, maybe it is a bit convoluted but it is very clean and useful:

All of us will have a parent component in the routes, in my case I have called it App, and we can imagine that we will have this component connected to redux, therefore the following tree would remain:

index.js > Provider > Router > App (with Outlet) > Child Route.

That means that we can create a yield put that changes a props in the parent component, in my case App, which will contain a useEffect that will launch the navigate:

import { useEffect } from 'react'
import { Outlet, useNavigate } from "react-router-dom";

const AppContainer = ({  url }) => {
    const navigate = useNavigate()


    useEffect(()=>{
        if (url) {
            navigate(url)
        }
    }, [url])

    return (
        <div>
            <Outlet />
        </div>
     )
}

export default AppContainer;

Now whenever I want to navigate from the sagas I simply have to execute a yield put, in this way the props url is modified and the useEffect is launched that sends me to the requested url.

Since my SPA system is a bit complex, I'll leave you to solve that part of connecting the dispatch with the component

Answer 4

There is an option that works well for me. You should just take a router (the result of createBrowserRouter() call) and set it to sagaMiddleware context and then use it from saga wherever you want.

App.tsx

const router = createBrowserRouter([
  {
    path: '/',
    element: <div>Home</div>
  },
]);

sagaMiddleware.setContext({
  router,
});

export const App = () => {
  return (
    <RouterProvider router={router}/>
  );
}

saga.ts

export function* selectSmthSaga(action: ActionType<typeof selectSmthAction>) {
  const router: ReturnType<typeof createBrowserRouter> = yield getContext('router');

  router.navigate(`/path/${action.payload}/subpath`);
}

Answer 5

you can use @lagunovsky/redux-react-router instead of connected react router because it's support react router v6

Update: Here's a link to the package which provides further documentation for migrating from conncted-react-router https://www.npmjs.com/package/@lagunovsky/redux-react-router#user-content-migrate-from-connected-react-router