Applaying Framework7 with Remix.js

Overview

Hello Folks, I'm trying to apply Framework7 latest version [v8.3.4] to my Remix.js app, i do all nesessry things from boath side (remix and framework7) and it's working with remix router issue

Explain the project Remix.js file

app/root.tsx
app/routers/_index.tsx
app/routers/about.tsx

let's take a look how this file look like with the code:

for full code overview take a look to this code repo: []

1- root.tsx:


import {
Links,
Meta,
Scripts,
Outlet,
ScrollRestoration,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/node";

// Import F7 Bundle and React Plugin import Framework7 from 'framework7/lite-bundle'; import Framework7React, { App, View } from 'framework7-react';

import AboutPage from './routes/about'; import HomePage from './routes/_index';

// Initialize Framework7 with the React plugin globally Framework7.use(Framework7React);

// Framework7 module styles import '../node_modules/framework7/framework7-bundle.css'

export const links: LinksFunction = () => [ { rel: "preconnect", href: "https://fonts.googleapis.com" }, { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous", }, { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap", }, ];

export function Layout({ children }: { children: React.ReactNode }) { return (

{children}

);

}

const f7params = { name: 'My App', // routes routes: [ { path: '/', component: HomePage, }, { path: '/about/', component: AboutPage, }, ], // ... other params }

export default function MyApp() { return ( <App theme="auto" {...f7params}> {/ Main View component with "main" prop /}

{/* This renders nested routes via Outlet */}

    </App>
);

}


#### 2-  _index.tsx: (as home page with route '/')

import type { MetaFunction } from "@remix-run/node"; import { Link } from "@remix-run/react"; import { Navbar, Page } from 'framework7-react';

export const meta: MetaFunction = () => { return [ { title: "New Remix App" }, { name: "description", content: "Welcome to Remix!" }, ]; };

export default function Index() { return ( // Main Framework7 App component where we pass Framework7 params

Welcome to the Home Page

About Page

);

}


#### 3-  about.tsx: (as home page with route '/about')

import type { MetaFunction } from "@remix-run/node"; import { Link } from "@remix-run/react"; import { Page, Navbar } from 'framework7-react';

export const meta: MetaFunction = () => { return [ { title: "Remix App - About" }, { name: "description", content: "Welcome to About Page!" }, ]; };

const about = () => { return (

{/* Top Navbar */} {/* Page Content */}

Page About

Home

) }

export default about



**I was wondering how to make router in Framework7 compatible with Remix** 
**this is working but url not updated on my browser**

framework7io / framework7