Rendered together routes with parameters and chars

Using this:

<Route path="/player/new">
  <New />
</Route>
<Route path="/player/:playerID" let:params>
  <Show playerID={params.playerID} />
</Route>

or this:

<Route path="/player/*">
  <Route path="/new">
    <New />
  </Route>
  <Route path="/:playerID" let:params>
    <Show playerID={params.playerID} />
  </Route>
</Route>

it renders /player/new and /player/123 together.

Expected

It should render <New /> if I’m on /player/new and <Show /> if I’m on /player/* (everything is not /player/new).

Am I wrong?

[AlexxNB]

Yeah, you should use /#/page notation for Links in REPL. Because REPL has own handler for all links inside.

[AlexxNB]

Nope, router store is not why tinro works. It is just URL changing handler. You have only this choices at the moment:

1. Do not use <Route> inside lazyloaded component. Consider to change your architecture:

Before:

<!-- Mypage.svelte -->
I'm the page
<Route path="/page1"><Lazy cmp={import('./Page1.svelte)}/></Route>
<Route path="/page2"><Lazy cmp={import('./Page2.svelte)}/></Route>

<!-- App.svelte -->
<Route>
    <Lazy cmp={import('./Mypage.svelte)}/>
</Route> 

After:

<!-- Pageroot.svelte -->
I'm the page

<!-- Mypage.svelte -->
<Lazy cmp={import('./Pageroot.svelte)} />
<Route path="/page1"><Lazy cmp={import('./Page1.svelte)} /></Route>
<Route path="/page2"><Lazy cmp={import('./Page2.svelte)} /></Route>

<!-- App.svelte -->
<Route>
    <Mypage />
</Route> 

1. Choose different router from the list.