1

I want to redirect after processing the operations file. However, connected-react-router cannot be used with react-router v6.

What is a way to resolve this?

operations.ts

import { push } from 'connected-react-router';

export function createMember(data: User) {
  return async (dispatch: Dispatch<Action>) => {
    // create members
    dispatch(push('/members')
  }
}

Is there a way to receive store changes in a file on the tsx side and redirect them with useNavigate()?

Or will it be solved by adding middleware to the store?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
xbirdx
  • 33
  • 4
  • `connected-react-router` isn't compatible with `react-router@6`. Does this answer your question? https://stackoverflow.com/a/73628683/8690857 – Drew Reese May 12 '23 at 05:42
  • I see you have deleted your comment/response, or it was removed by the system. Had you a chance to try out the proposed solution in the linked post? – Drew Reese May 12 '23 at 16:39
  • @DrewReese `import { unstable_HistoryRouter as Router } from 'react-router';` what about this part? With only the router, i can't do anything after the history argument – xbirdx May 13 '23 at 11:45
  • What about the import? Can you clarify your comment? – Drew Reese May 13 '23 at 15:22
  • @DrewReese I did exactly what you said in the article you pointed to, but I can't get the Router to have a value(history). `` How should I import react-router to pass history? – xbirdx May 13 '23 at 17:01
  • Can you [edit] your post to share a [mcve] of the code you are trying to use? If possible, could you also try creating a ***running*** [codesandbox](https://codesandbox.io/) demo of the code that we could inspect live? – Drew Reese May 15 '23 at 16:49
  • @DrewReese ok! I just wrote the code. What I want to do is to have the `/members` path redirect to Home on the `/members/operations.ts` file when I log out. [link](https://codesandbox.io/s/funny-rosalind-q64nm7) – xbirdx May 15 '23 at 18:25
  • Here's a forked [sandbox](https://codesandbox.io/s/what-should-i-do-if-i-want-to-use-connected-react-router-for-redux-with-react-ro-p24oeo) with the router working with Redux. *However*, I think you might be making this more complicated than it needs to be. You are using `redux-toolkit` which allows you to write better thunks, which can, and probably *should*, be `await`-ed in the UI code and the callback simply calls the `navigate` function when the action successfully resolves. IMO this is the more idiomatic method to use if you want to navigate *after* an action completes successfully. – Drew Reese May 15 '23 at 19:53
  • If the solution proposed in the linked answer sufficiently resolves your initial question/issue here then my recommendation is to have this question closed as a duplicate, otherwise you can refine the post explaining *why* `redux-first-history` doesn't resolve your question and we can work from there. – Drew Reese May 15 '23 at 19:56

0 Answers0