How we can achieve navigation to another page in LWC OSS

Question

I have two files created in LWC OSS app

first file at src/client/index.html and src/client/index.js

second file at src/client/index2.html and src/client/index2.js

I want to navigate to index2.html when clicked on the button in my-app (LWC component) which is appended using index.js

Am new to express js and node js. Please help!

Below is the code of the files,

index.html (File location: src/client/index.html)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My LWC App</title>
        <style>
            body {
                font-family: Arial, Helvetica, sans-serif;
            }
        </style>
        <!-- Block zoom -->
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
        />
        <link rel="shortcut icon" href="./resources/favicon.ico" />
    </head>
    <body>
        <div id="main"></div>
    </body>
</html>

index.js (File location: src/client/index.js)

import { createElement } from 'lwc';
import MyApp from 'my/app';

const app = createElement('my-app', { is: MyApp });
// eslint-disable-next-line @lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);

app.html (File location: src/client/modules/my/app/app.html)

<template>
    <!-- LWC sample component <my-greeting> -->
    <div class="center greeting">
        <!-- <my-greeting speed="slow"></my-greeting> -->
        <my-greeting speed="medium"></my-greeting>
        <!-- <my-greeting speed="fast"></my-greeting> -->
    </div>

    <div class="center">
        <img src="./resources/lwc.png" />
    </div>

    <!-- Page code -->
    <div class="center">
        <div class="container">
            <!-- prettier-ignore -->
            <p class="info">
                Edit <strong class="code">src/client/modules/my/app/app.html</strong>
                <br />and save for live reload.
            </p>
        </div>
        <div>
            <a href="https://lwc.dev" class="link" target="_blank">Learn LWC</a>
            <button onclick={redirect}>Click to redirect</button>
        </div>
    </div>
</template>

app.js (File location: src/client/modules/my/app/app.js)

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
    redirect(){
        //code for to navigate to index2.html
    }
}

index2.html (File Location: src/client/index2.html)

<html lang="en">
    <body>
        <div id="main"></div>
    </body>
</html>

index2.js (File Location: src/client/index2.js)

import { createElement } from 'lwc';
import MyNewApp from 'my/newApp';

const app = createElement('my-app', { is: MyNewApp });
// eslint-disable-next-line @lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);

7.newApp.html (File location: src/client/modules/my/newApp/newApp.html)

<template>

    <h1> Redirected to index2 --> newApp </h1>

</template>

Please let me know if you need more information.

Thanks, Navaprasad

Please provide the code that you have tried. We can help you to change/modify it. And pay attention to typos and use formattings available in StackOverflow editor in suitable instances to improve the readability of the question. — Pawara Siriwardhane, Mar 22 '21 at 04:07
@Pawara I included the code snippets into the description now. Thanks! — Navaprasad Reddy Ande, Mar 22 '21 at 08:42

How we can achieve navigation to another page in LWC OSS

0 Answers0