-
Notifications
You must be signed in to change notification settings - Fork 95
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
React-router v6 TypeScript issues #196
Comments
For location fix, I added
Also additional note, I get in console: |
Until this lib gets react router v6 support (maybe a complete re-write is better) I created this hook #108 (comment) which can be used as |
Your children type error is likely due to you casting RouteAdapter as React.FC, which shouldn't be necessary, but thank you for sharing this example! |
Hey @pbeshai! I think we need to cast it because of
|
Thanks so much @jtheberge, your code above including the error disabling on the @pbeshai if you want to edit this comment to link here that might be good, I started with that but then got stuck trying to typescript-ify it a few ways before I looked again at the above |
@jtheberge const RouteAdapter: React.FC = ({ children }) => {
const reactRouterNavigate = useNavigate();
const reactRouterLocation = useLocation();
const adaptedHistory = useMemo(
() => ({
// can disable eslint for parts here, location.state can be anything
replace(location: Location) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
reactRouterNavigate(location, { replace: true, state: location.state });
},
push(location: Location) {
reactRouterNavigate(location, {
replace: false,
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
state: location.state,
});
},
}),
[reactRouterNavigate]
);
// https://github.com/pbeshai/use-query-params/issues/196
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return children({ history: adaptedHistory, reactRouterLocation });
}; Thank you so much 🙏 |
If you look at the compiled and minimized JS code, you will see that the type import { Location } from 'history';
import { BrowserRouter, useLocation, useNavigate, Location as RouterLocation } from 'react-router-dom';
const RouteAdapter: React.FunctionComponent<{
children: React.FunctionComponent<{
history: {
replace(location: Location): void;
push(location: Location): void;
},
location: RouterLocation }>;
}> = ({ children }) => {
const navigate = useNavigate();
const routerLocation = useLocation();
const adaptedHistory = React.useMemo(
() => ({
replace(location: Location) {
navigate(location, { replace: true, state: location.state });
},
push(location: Location) {
navigate(location, { replace: false, state: location.state });
},
}), [navigate],
);
if (!children) {
return null;
}
return children({ history: adaptedHistory, location: routerLocation });
}; and then use the following router: <BrowserRouter>
<QueryParamProvider ReactRouterRoute={RouteAdapter as unknown as React.FunctionComponent}>
{children}
</QueryParamProvider>
</BrowserRouter> |
@jtheberge & @optimistic-updt your code is broken. The final return props needs to have |
@kuberlog When I had the |
I finally got it working, but It would reload the children of the provider (basically the whole app) every time I navigated somewhere. I ended up removing |
Has anyone forked/published/etc these fixes? Seems like a lot of potential solutions here but none are complete. |
@kuberlog , care to share your solution? |
@pbeshai - Any updates on this? |
@kuberlog , when you say "but It would reload the children of the provider (basically the whole app) every time I navigated somewhere", do you mean it would re-render the children, or that it would completely unmount and remount them (or what)? |
Here's my 'fork': https://github.com/mcctomsk/react-router-url-params Internally the 'fork' relies on react-router's |
@Shaddix - Did you publish it to NPM? |
Hi there, support for React Router 6 has been added in v2.0.0-rc.0. See the changelog for details on migration. Let me know if you have any issues, will likely switch to the full v2 release by end of week. |
Referencing set-up from https://github.com/pbeshai/use-query-params/blob/master/examples/react-router-6/src/index.js, I'm getting some TypeScript issues. For example,
![Screen Shot 2021-11-22 at 5 55 12 PM](https://user-images.githubusercontent.com/13157499/142960951-3ee8201a-4bcc-4ffc-9526-a5810b701f05.png)
children
is invoked as a function rather than treated as ReactNode. Refer to screenshot:The text was updated successfully, but these errors were encountered: