Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for [email protected] #135

Open
stheine opened this issue Nov 25, 2024 · 4 comments
Open

Support for [email protected] #135

stheine opened this issue Nov 25, 2024 · 4 comments

Comments

@stheine
Copy link

stheine commented Nov 25, 2024

There is the new [email protected], and redux-first-history does not yet support that.
Are there plans to do so?

@steinarb
Copy link

FWIW I am now using react-router 7.1.1 and both navigation with push and location detection with LOCATION_CHANGE seems to work for me...?

@sahara18
Copy link

sahara18 commented Feb 3, 2025

We’ve discovered an interesting behavior: the project mostly aligns with React Router v7 in our case, except for the redux-first-history/rr6/HistoryRouter wrapper (https://github.com/salvoravida/redux-first-history/blob/master/rr6/index.js).

Since React Router v7 now provides different distribution files (.js and .mjs), different files are used depending on whether import or require is used. As a result, while we were importing React Router in the main project, the redux-first-history wrapper was still requiring it.

This led to the application ending up with two different router instances, which caused failures whenever React Router hooks were used 'outside' the expected context. The library essentially perceived the components as being outside the router.

So far, we haven’t found a better solution than copying the HistoryRouter wrapper into the project and updating it to use modern ES module imports. But perhaps a better approach could be applied?

import React, {ReactNode, useLayoutEffect, useState} from 'react';
import {Router} from 'react-router-dom';
import {History} from 'history';

export type Props = {
	basename?: string,
	history: History,
	children?: ReactNode,
};

export const HistoryRouter = (props: Props) => {
	const {basename, children, history} = props;
	const [historyState, setHistoryState] = useState({
		action: history.action,
		location: history.location,
	});

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

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

@steinarb
Copy link

steinarb commented Feb 3, 2025

Can the problems with HistoryRouter wrapper be the cause for this problem? #137

(The react-first-history router stopped being recognized as a router when I bumped the vite version to 6)

@sahara18
Copy link

sahara18 commented Feb 3, 2025

Thanks! We’re seeing almost the same error message, coming from an .mjs file — so the issues might be related.

However, the conditions seem different: we’re not using Vite, and the only change that just happened was the migration from React Router v6 to v7.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants