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.

Sign up for GitHub

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

Jump to bottom

Can't be used around solid-js/router #3

Closed
onx2 opened this issue Jun 10, 2024 · 3 comments · May be fixed by #4
Closed

Can't be used around solid-js/router #3

onx2 opened this issue Jun 10, 2024 · 3 comments · May be fixed by #4

Comments

@onx2
Copy link

onx2 commented Jun 10, 2024 •
edited
Loading

I'm trying this package out and it is great so ty for your work!

I noticed a bug that prevented me from wrapping my router in the provider. I'm not sure what is going on but the routes are not rendered when I click a link if the Router component is wraped in I18nProvider.

Broken

/* @refresh reload */

import { I18nProvider } from "@i18n-pro/solid";
import { Router } from "@solidjs/router";
import { render } from "solid-js/web";

import App from "./App";
import { i18nState } from "./i18n/state";
import { routes } from "./router";

render(
  () => (
    <Router
      root={() => (
        <I18nProvider {...i18nState}>
          <App />
        </I18nProvider>
      )}
    >
      {routes}
    </Router>
  ),
  document.getElementById("root")!
);

Also Broken

/* @refresh reload */

import { I18nProvider } from "@i18n-pro/solid";
import { Router } from "@solidjs/router";
import { render } from "solid-js/web";

import App from "./App";
import { i18nState } from "./i18n/state";
import { routes } from "./router";

render(
  () => (
  <I18nProvider {...i18nState}>
    <Router root={App}>{routes}</Router>
  </I18nProvider>
  ),
  document.getElementById("root")!
);
@onx2
Copy link
Author

onx2 commented Jun 11, 2024 •
edited
Loading

Interestingly enough this works:

const Root = (props: ParentProps) => {
  return (
    <I18nProvider {...i18nState}>
      <App>{props.children}</App>
    </I18nProvider>
  );
};

render(
  () => <Router root={Root}>{routes}</Router>,
  document.getElementById("root")!
);

@eyelly-wu
Copy link
Contributor

@onx2 Once again, thank you for your feedback. I apologize for not yet knowing why the above two methods do not work properly, but I'm glad you found a viable solution. As I'm currently busy with work, I may only have the energy to investigate this further later.

@onx2
Copy link
Author

onx2 commented Jun 11, 2024 •
edited
Loading

I think the solution I posted is fine for the time being - thanks for the quick reply!

@onx2 onx2 closed this as completed Jun 11, 2024
@onx2 onx2 mentioned this issue Jun 11, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore(packages): patch deps and use built-in solid type onx2/i18n-solid
2 participants
@onx2 @eyelly-wu