0

I created my first app using LWC OSS. I want to achieve the navigation from one page to another (url in the browser should change)

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,

  1. 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>
  1. 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);

  1. 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>
  1. 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
    }
}
  1. index2.html (File Location: src/client/index2.html)
<html lang="en">
    <body>
        <div id="main"></div>
    </body>
</html>
  1. 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

0

You can use normal <a> elements if you want to, or you could use History to create artificial entries and use if:true to toggle between elements. It's unusual to have multiple pages in a Component-based framework, since it usually operates as a Single Page Application (SPA) with a top-level controller that uses pushState and popstate to simulate multiple pages with potential state information.

4
  • Thanks @sfdcfox! I want to achieve similar scenario like creating a record in salesforce using lwc oss. In Salesforce when clicked on new the url changes to edit and edit page layout appears, after filling the form and clicking on save the page will redirect to detailed page and url changes to view. How can we achieve similar stuff in LWC OSS ? Mar 22 at 21:21
  • @NavaprasadReddyAnde You can do that with History or by using onhashchange, depending on how you want to achieve your goal.
    – sfdcfox
    Mar 22 at 21:26
  • @NavaprasadReddyAnde That's going to be a bit more complicated than a typical answer, but if you give me some time, I'd be happy to write something up.
    – sfdcfox
    Mar 22 at 21:27
  • Thank you very much for your time on this. I would be great if we find some solution. Mar 23 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.