-
-
Notifications
You must be signed in to change notification settings - Fork 1
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
Question - How to handle router that was fully typed from the browser? #12
Comments
The latest version of the template is using a port of Fable.LitRouter instead of Grapnel. Do you have an example of what is failing? |
Ahh I'll try that instead of Grapnel. Let me try that and will update |
@JordanMarr so I've updated using Fable.LitRouter. However, if I try to type in https://localhost:3000/cat-facts# I expect it to load to cats page but it goes to the home page instead. |
I'm using Elmish and I get the following error when I use
My root is not HookComponent but instead something like this:
How do I use the router with Elmish? |
Sorry, I forgot you switched to use vanilla Elmish. Sadly, Fable.LitRouter will not work for your site because it requires a hook component. 🙁 You can still use Grapnel router (which should allow you to navigate directly to URLs). If you do decide to use a component + Fable.LitRouter, you can configure the router to use |
@JordanMarr Actually it worked when I wrapped something like this:
No error but not sure if there's side effects. The reason I'm using vanilla elmish is because of
If you could show me how to use that ^ without vanilla elmish i'll gladly switch to the Lit one. So I did test but it's still not capturing the correct page when I type manually the URL. Still home page. Update: @JordanMarr - Looks like the side effect is that it keeps adding the "#" if I use Router.navigate lol. What is needed to make the Fable.LitRouter work with this pattern of Elmish? |
You just need to use |
Ahh that did it. This might sound obvious to you but I don't know why it's adding # at the end? Is that intended? I'm going to test out the url changed, but so far I think your Fable.LitReact works with the vanilla elmish... |
It wasn't obvious to me either. 😓 Glad that it's working! I also changed it so that |
Re: Elmish.Bridge / WebSockets If it were me, I'd probably try to use the generated Fable client bindings for SignalR as this guy did here: But overall, Fable.Bridge looks like a nice library, so maybe worth sticking with unless you enjoy F# science projects as I do. 🙂 |
Awesome. Thank you. It's using the navigatePath now but still appending the # at the end. I think it's just my knowledge of being a web developer. I'm sure there's a reason why it appends # in the lib. If you don't mind publishing the repo for the LitRouter so I can make some pull requests to make it work with Elmish :P. I could get the source from nuget but prefer Github :) |
That would be great. You can find the repo here: |
Just curious: are you using anchor links or buttons for navigation? I'm using buttons with a click event and I don't have any <sl-button @click={fun _ -> Router.navigatePath("/")}>
Home
</sl-button>
<sl-button @click={fun _ -> Router.navigatePath("/projects")}>
Projects
</sl-button> |
Ah good catch that was it. Thank you! |
If you still want the look of a link, shoelace has a text button: |
Not familiar with Graphnel, but if a user types in the address bar the full URL then it won't obviously load the correct page. I haven't tried looking deep into the library but just leaving this here maybe you've already solve it.
The text was updated successfully, but these errors were encountered: