How to route on a url?

Hello!

I create an ordinary page in connexion.html and I try to route on this page. but I have the following error
http://localhost:8080/pages/connexion.html 404 (Not Found)

I am on a project framework7 v4

src\js\routes.js

import HomePage from ‘…/pages/home.f7.html’;
import AboutPage from ‘…/pages/about.f7.html’;
import FormPage from ‘…/pages/form.f7.html’;
import CatalogPage from ‘…/pages/catalog.f7.html’;
import ProductPage from ‘…/pages/product.f7.html’;
import SettingsPage from ‘…/pages/settings.f7.html’;

import DynamicRoutePage from ‘…/pages/dynamic-route.f7.html’;
import RequestAndLoad from ‘…/pages/request-and-load.f7.html’;
import NotFoundPage from ‘…/pages/404.f7.html’;

var routes = [
{
path: ‘/’,
component: HomePage,
},
{
name: ‘connexion’,
path: ‘/connexion/’,
url:’./pages/connexion.html’,
},
]

connexion.html

<!DOCTYPE html>

<html>

<head>

<meta charset=“utf-8”>

<!–

Customize this policy to fit your own app’s needs. For more guidance, see:

Some notes:

  • gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication

  • https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly

  • Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:

  • Enable inline JS: add ‘unsafe-inline’ to default-src

–>

<meta http-equiv=“Content-Security-Policy”

content=“default-src * ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ data: gap: content:”>

<meta name=“viewport”

content=“width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover”>

<meta name=“theme-color” content="#0f7791">

<meta name=“format-detection” content=“telephone=no”>

<meta name=“msapplication-tap-highlight” content=“no”>

<title>Kivala</title>

<!-- built styles file will be auto injected -->

</head>

<body>

</body>

</html>

link

Connexion