lagunovsky / redux-react-router Goto Github PK

I am getting this error in Create React App. Was this component not achievable with functional components and hooks?

 Missing class properties transform.
  69 | }
  70 | class ReduxRouter extends React.Component {
> 71 |     removeHistoryListener;
     |     ^^^^^^^^^^^^^^^^^^^^^^
  72 |     removeStoreSubscription;
  73 |     timeTravelling = false;
  74 |     static defaultProps = {

But it is there. As you can see in the first screenshot history obj comes not undefined.



package.json:
"history": "^5.3.0",
"react-router-dom": "^6.3.0",
"@lagunovsky/redux-react-router": "^4.0.0"

in the examples reducers.tsx there should be createRouterReducer instead of connectRouter in import?

Not sure if something is missing in my config but I noticed after changing location with Link component, Browser's ( Chrome ) back button seems to not triggering ON_LOCATION_CHANGED action which causes app to go blank screen.

Hi,

I'm hoping this is just a ts issue but I am getting this error when trying to use this in my project

e.g.
// in main App... <ReduxRouter history={browserHistory} store={store}> <Routes> <Route path={user/} element={<User/>} /> <Route path={settings/`} element={} />

// in User component...

<Route path={change_password} element={} />
<Route path={change_address} element={} />

`

In React Router v6 nested routing is supported and recommended. Is it possible to fix this?

Currently trying to implement this due to being unable to use react router V6 and history v5 together, hoping this package can help.

Looks like I've configured everything correctly and routing works but it seems that if I visit a URL and then go to visit the same URL, there is no navigation between pages on my app. This happens with both user navigation (buttons on the components) as well as the browser back buttons. Quick example of my code and the issue I'm facing. From what I can tell the redux actions are firing correctly.

Routing Issue:

• Navigate to /tests route
  • shown TestsPage
• Navigate to /test/test-id route
  • shown TestView page
• Navigate back to /tests route
  • browser URL changes but page does not navigate to TestsPage

AppRouter.tsx

export const history = createBrowserHistory();

<ReduxRouter history={history}>
    <Routes>
        <Route path="/test/create" element={<TestCreatePage />}
        <Route path="/" element={<Nav />}>
	    <Route path="tests" element={<TestsPage />} />
        </Route>
	<Route
	    path="/tests/:testId"
	    element={<TestView />}
	/>
    </Routes>
</ReduxRouter>

reducer.ts

const historyReducer = createRouterReducerMapObject(history);

export const rootReducer = combineReducers({
	[api.reducerPath]: api.reducer,
	[testSlice.name]: testSlice.reducer,
	[authSlice.name]: authSlice.reducer,
	...historyReducer,
});

storeConfig.ts

const historyMiddleware = createRouterMiddleware(history);

// Persist root reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// Configure redux store using redux toolkit
const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: {
                // These actions are ignored to prevent errors during re-hydration
                ignoredActions: [
                    FLUSH,
                    REHYDRATE,
                    PAUSE,
                    PERSIST,
                    PURGE,
                    REGISTER,
                ],
            },
        })
        .concat(
            api.middleware,
            authListenerMiddleware.middleware
        )
    .prepend(historyMiddleware),
});

Sorry for the long wall of text, just wanted to get enough information across of my setup in hopes you can spot me doing something dumb 😄. Cheers!

EDIT: Main reason I'm doing this is so I can use history.push() etc within functions/redux actions without issues. I've also been able to just about get away with it by using unstable_HistoryRouter from react-router-dom although unsure when support for that will end.

Currently main component is plain Router component. With recent changes in React-router v6.4+ some hooks can only run if you are using data routers like createBrowserRouter or BrowserRouter. Using embed Router component makes this library incompatible with new updates.

Hello,

I'm creating this issue because the package seems to be very promising to me and I have not found any alternative for the connected-react-router that is compatible with the newest versions of react router.

I'm wondering whether the current 2 contributors plan to continue the maintenance of the package in long term? 🤔 Or, are you guys looking for contributors too? I saw on NPM that the weekly download is increasing and I guess if there is no bigger concurrency, this package could be the one that people use for this purpose 💪

Thanks a lot so far and in advance.

Since we have a constant const ROUTER_REDUCER_MAP_KEY = 'router' storing reducer with key 'navigator' like in example doesn't work:
const rootReducer = combineReducers({ navigator: createRouterReducer(history) })

Hello,

after implementing redux-react-router into my project my ProtectedRouter Component always seems to fall on the fallback return case ()

Protecte

Obviously I am doing something wrong. Could you kindly point out where I should look into?

Thanks in advance

It would be great if we could have a release of this library for react-redux 9. Maybe it is enough to just update the package.json?

Seems like there is an issue with ReduxRouter component.

When navigating between two routes, on the first location change, there is an error in the console saying:

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the ReduxRouter component.

I might point you in the right direction or completely in the wrong direction, but when I disable StrictMode, the error is gone. It would be nice to work with StrictMode enabled as well, tho.

EDIT: I just had a look at the ReduxRouter component implementation. There is a setState call in the constructor. I believe moving the this.removeHistoryListener listener to componentDidMount would remove the error, but I'm not sure if that's the right solution.

The new React-redux version (v8) is , in theory, fully backward compatible. (https://github.com/reduxjs/react-redux/releases)
Is there any way to support also this version?

Is it possible to support also react v16?

After I upgraded to "react-router-dom": "^6.15.0", I've got this error:
Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

Here is my Routes component

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = [
  {
    path: '/',
    element: <DashboardRouteLayout />,
    children: [
      {
        path: '/',
        element: <RouteWrapper component={Home} />,
      },
    ],
  },
]

const Routes = () => {
  return (
    <ReduxRouter history={history}>
      <RouterProvider router={createBrowserRouter(router)} />
    </ReduxRouter>
  )
};

export default Routes;

I need use createHashRouter function. How i can use it with your library?

I seem to be having an issue with this. The error seems to occurr from the ReduxRouter provider, or atleast where it is called.

I am using

    "react-dom": "^18.2.0",
    "react-router": "^6.3.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts-ts": "2.17.0",
    "redux": "^4.2.0",
    "redux-saga": "^0.16.0",
    "redux-thunk": "^2.2.0",

import {createBrowserHistory} from "history";


const history = createBrowserHistory()
const store = configureStore(history, {}, rootSaga);

const render = () => {
	createRoot(document.getElementById("root") as HTMLElement).render(
		<Provider store={store}>
			<ReduxRouter history={history}>
				<App/>
			</ReduxRouter>
		</Provider>,
	);
}

render();

Any suggestions?