Routing
Routing is a popular way to switch views in an application. This page offers some guidance around how to do that.
Vue
The recommended approach for routing in Vue is Hash Mode:
import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
});
Angular
The recommended approach for routing in Angular is HashLocationStrategy:
RouterModule.forRoot(routes, { useHash: true });
React
The recommended approach for routing in React is HashRouter:
import { HashRouter, Routes, Route } from "react-router-dom";
ReactDOM.render(
<HashRouter basename={"/"}>
{/* The rest of your app goes here */}
<Routes>
<Route path="/" element={<Page0 />} exact />
<Route path="/page1" element={<Page1 />} />
<Route path="/page2" element={<Page2 />} />
{/* more... */}
</Routes>
</HashRouter>,
root
);
Svelte
The recommended approach for routing in Svelte is svelte-spa-router:
<script>
import Router from "svelte-spa-router";
</script>
<Router
routes={{
"/": Home,
"/products": wrap({
asyncComponent: () => import("./routes/Products.svelte"),
}),
"/settings": Settings,
"*": NotFound,
}}
/>