[SOLVED] React :: List Item Link Open Inside Panel Itself

Hi,

I’ve setup React - Tab View app using Framework7 CLI UI. On right panel, have links to other pages. But those are opening inside right panel.

I want to open those as separate pages.

routes.js

import HomePage from '../pages/home.jsx';
import AboutPage from '../pages/about.jsx';
import FormPage from '../pages/form.jsx';
import CatalogPage from '../pages/catalog.jsx';
import ProductPage from '../pages/product.jsx';
import SettingsPage from '../pages/settings.jsx';

import DynamicRoutePage from '../pages/dynamic-route.jsx';
import RequestAndLoad from '../pages/request-and-load.jsx';
import NotFoundPage from '../pages/404.jsx';

import LoginPage from '../pages/login.jsx';

var routes = [
    {
        path: '/',
        component: HomePage,
    },
    {
        path: '/login/',
        component: LoginPage,
    },
    {
        path: '/about/',
        component: AboutPage,
    },
    {
        path: '/form/',
        component: FormPage,
    },
    {
        path: '/catalog/',
        component: CatalogPage,
    },
    {
        path: '/product/:id/',
        component: ProductPage,
    },
    {
        path: '/settings/',
        component: SettingsPage,
    },

    {
        path: '/dynamic-route/blog/:blogId/post/:postId/',
        component: DynamicRoutePage,
    },
    {
        path: '/request-and-load/user/:userId/',
        async: function (routeTo, routeFrom, resolve, reject) {
            // Router instance
            var router = this;
            // App instance
            var app = router.app;
            // Show Preloader
            app.preloader.show();
            // User ID from request
            var userId = routeTo.params.userId;
            // Simulate Ajax Request
            setTimeout(function () {
                // We got user data from request
                var user = {
                    firstName: 'Vladimir',
                    lastName: 'Kharlampidi',
                    about: 'Hello, i am creator of Framework7! Hope you like it!',
                    links: [
                        {
                            title: 'Framework7 Website',
                            url: 'http://framework7.io',
                        },
                        {
                            title: 'Framework7 Forum',
                            url: 'http://forum.framework7.io',
                        },
                    ]
                };
                // Hide Preloader
                app.preloader.hide();
                // Resolve route to load page
                resolve(
                    {
                        component: RequestAndLoad,
                    },
                    {
                        context: {
                            user: user,
                        }
                    }
                );
            }, 1000);
        },
    },
    {
        path: '(.*)',
        component: NotFoundPage,
    },
];

export default routes;

app.jsx

import React from 'react';
import { App, Panel, Views, View, Popup, Page, Navbar, Toolbar, NavRight, Link, Block, BlockTitle, LoginScreen, LoginScreenTitle, List, ListItem, Icon, ListInput, ListButton, BlockFooter } from 'framework7-react';
import routes from '../js/routes';
export default class extends React.Component {
    constructor() {
        super();
        this.state = {
            // Framework7 Parameters
            f7params: {
                name: 'My App', // App name
                theme: 'auto', // Automatic theme detection
                // App root data
                data: function () {
                    return {
                        // Demo products for Catalog section
                        products: [
                            {
                                id: '1',
                                title: 'Apple iPhone 8',
                                description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
                            },
                            {
                                id: '2',
                                title: 'Apple iPhone 8 Plus',
                                description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
                            },
                            {
                                id: '3',
                                title: 'Apple iPhone X',
                                description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
                            },
                        ]
                    };
                },
                // App routes
                routes: routes,
                // Register service worker
                serviceWorker: {
                    path: '/service-worker.js',
                },
            },
            // Login screen demo data
            username: '',
            password: '',
        }
    }
    render() {
        return (
            <App params={this.state.f7params}>
                {/* Left panel with cover effect*/}
                <Panel left cover>
                    <View>
                        <Page>
                            <Navbar title="Info" />
                            <BlockTitle>About Us</BlockTitle>
                            <Block>We're about to change sri lanka</Block>
                        </Page>
                    </View>
                </Panel>
                {/* Right panel with reveal effect*/}
                <Panel right reveal>
                    <View>
                        <Page>
                            <Navbar title="My Profile" />
                            <BlockTitle>Profile Actions</BlockTitle>
                            <List>
                                <ListItem id="logInItem" link="#" title="Login">
                                    <Icon slot="media" f7="person_badge_plus"></Icon>
                                </ListItem>
                                <ListItem id="logOutItem" link="#" title="Logout">
                                    <Icon slot="media" f7="power"></Icon>
                                </ListItem>
                                <ListItem link="/about/" title="About" />
                                <ListItem link="/form/" title="Form" />
                            </List>
                        </Page>
                    </View>
                </Panel>
                {/* Views/Tabs container */}
                <Views tabs className="safe-areas">
                    {/* Tabbar for switching views-tabs */}
                    <Toolbar tabbar labels bottom>
                        <Link tabLink="#view-home" tabLinkActive iconIos="f7:house_fill" iconAurora="f7:house_fill" iconMd="material:home" text="Home" />
                        <Link tabLink="#view-catalog" iconIos="f7:chat_bubble_2_fill" iconAurora="f7:chat_bubble_2_fill" iconMd="f7:chat_bubble_2_fill" text="Catalog" />
                        <Link tabLink="#view-settings" iconIos="f7:waveform_path" iconAurora="f7:waveform_path" iconMd="f7:waveform_path" text="Settings" />
                    </Toolbar>
                    {/* Your main view/tab, should have "view-main" class. It also has "tabActive" prop */}
                    <View id="view-home" main tab tabActive url="/" />
                    {/* Catalog View */}
                    <View id="view-catalog" name="catalog" tab url="/catalog/" />
                    {/* Settings View */}
                    <View id="view-settings" name="settings" tab url="/settings/" />
                </Views>
            </App>
        )
    }
    alertLoginData() {
        this.$f7.dialog.alert('Username: ' + this.state.username + '<br>Password: ' + this.state.password, () => {
            this.$f7.loginScreen.close();
        });
    }
    componentDidMount() {
        this.$f7ready((f7) => {
            // Call F7 APIs here
        });
    }
}

Please advice. Thanks

You can only open them in some specific view, if it is your main view, then it should be:

<ListItem link="/about/" title="About" view="#view-home" />
1 Like