How to set the default route

[docdunning]

First - Pinecone looks like it will be really useful - thanks for putting it together.

I'm trying to work out the best way to define a default route for a page.

Say I have an Alpine component with three routes:

<a href="/">Home</a>
<a href="/hello/world">Hello World</a>
<a href="/about">About</a>

<template x-route="/">
  <p>Home page</p>
</template>

<template x-route="/hello/:name">
  <p>Say hello to <span x-text="$router.params.name"></span></p>
</template>

<template x-route="/about">
  <p>About Us</p>
</template>

When I view the page, all the templates are hidden. I understand why that is, but I want the first one (with route '/') to be shown by default, and also when I click the 'Home' link.

I am able to do this by adding an x-init on the component:

x-init="window.PineconeRouter.context.navigate('/')"

Is this the best (or only) way to have a template with an x-route attribute displayed immediately?

[rehhouari]

Hey!
What page you're visiting that makes it so all templates are hidden?
it should show / route if you visit example.com by default since that's the / route (example.com and example.com/ are same route)

or do you mean the template take long to show? in that case wouldn't be the same delay for all page is or is it just the / route?

[docdunning]

OK, I see why this is happening. Here is the code for the page.

index.html.txt

The pages are served from localhost:5500 (I'm using Live Server from VS Code)

1. If I open the page localhost:5500/index.html, then I see the "notfound" message. But now I understand - of course, /index.html doesn't match any of the routes.

2. If I just go to localhost:5500, then it's fine. I see the "Home" template as expected and the "notfound" message is hidden.

3. Now I put exactly the same index.html into a subfolder 'router'

4. When I go to localhost:5500/router, it doesn't work properly - the notfound template is shown.

5. So I change the component to have x-init="window.PineconeRouter.settings.basePath = '/router'" and now it works OK.

6. But as in step 1, when I go to localhost:5500/router/index.html, it doesn't match any route and I see the "not found" message

7. I think the safest approach is always to have window.PineconeRouter.context.navigate('/') in the x-init function, so that the "Home" template route is matched, and to make sure that basePath is set correctly for a subfolder.

Question, though - can I use a regex in the x-route directive? So I can match an optional index.html? I guess it would be something like x-route="/(index.html)?". That would save having to do the navigate in x-init.

[rehhouari]

I think the best approach would be not have index.html in the URL at all. That's not how client side routers are meant to work.
Take this for example: https://reactrouter.com/index.html
It also shows 404. And it's the most used framework and router, so it's the standard.
and no you can't use regex only options are mentioned in the README.

/index.html is inconsitant cause then shouldn't the rest of the routes be /index.html/about or even /about.html?

However if you're forced to use it, this may be a better approach:

<template x-route="/index.html" x-handler="ctx => ctx.redirect('/')"></template>

This will make it so it only redirect to / when you view /index.html route.
Your method in x-init will always visit the homepage even if you're at /about.

Glad you were able to figure out and thanks for using the router!