Change base does not work

[iamcco]

function App() {
  const [base, setBase] = createSignal('old');
  return <Router base={base()}>
    <button onclick={() => setBase('new')}>Change base</button>
    <Link href="/about">about</Link>
    <Routes />
  </Router>
}

After change base to new then call useNavigator()('/about') still navigate to /old/about

[rturnq]

The base prop on the Router component is not intended to be changed during the lifetime of the component. It's primary purpose is to provide a convenient way configure applications that are hosted at some path other than the root.

My biggest question for supporting a dynamic router base is what is the expectation of the matched routes when you change the base? For instance if the browsers is at /old/about and you change the base from old to new, no routes will match until you navigate to /new/about. Should the router navigate there automatically? Is there a common use-case here I'm not seeing?

[iamcco]

My use case is that our website use the base as the i18n location. For example base en-us and at https:/example.com/en-us/about page, after user change their language to zh-cn then update base to zh-cn and call navigator('/about') to /zh-cn/about.

My workaround now is refresh the page using the window.location.href.

[ryansolid]

The workaround is pretty reasonable. Since the base is outside of the routers dynamic path matching it would be interesting to decide what the behavior should be. I'd lean towards routing to that given we don't want to be in an inconsistent state with the browser.. but it also doesn't really work both ways.. like if you press browser back we can't restore the language setting. I don't know if the router can take responsibility for the base in this sense.