Magento 2 PWA custom router

Question

How to Create custom router page content?

What I've tried added Route to routes.js:

import React, { Suspense } from 'react';
import { Route, Switch, useLocation } from 'react-router-dom';

import { fullPageLoadingIndicator } from '../LoadingIndicator';
import HomePage from '../HomePage';
import MagentoRoute from '../MagentoRoute';
import { useScrollTopOnChange } from '@magento/peregrine/lib/hooks/useScrollTopOnChange';
import MyPage from '../MyPage/index'; //@location ../pwa-studio/packages/venia-ui/lib/components

const Routes = () => {
    const { pathname } = useLocation();
    useScrollTopOnChange(pathname);

    return (
        <Suspense fallback={fullPageLoadingIndicator}>
            <Switch>
                <Route>
                    <MagentoRoute />
                    <Route exact path="/venia-new-home">
                        <HomePage />
                    </Route>
                </Route>
                <Route exact name="MyPage" staticName={true} path="/my-page" component={MyPage}/>
            </Switch>
        </Suspense>
    );
};

../pwa-studio/packages/venia-ui/lib/components/MyPage/index.js:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'src/drivers';
import { compose } from 'redux';
 
class MyPage extends Component {
    static propTypes = {
        initialValues: PropTypes.shape({}),
        history: PropTypes.shape({})
    };
 
    customPage = () => {
        const { history } = this.props;
    };
 
    render() {
        return <div>This is my Custom Page</div>;
    }
}
 
export default compose(withRouter, MyPage);

yarn run build //run with no errors

yarn run stage:venia //run with no errors

When I load the https://localhost:1200/my-page i get:

What am I missing ?

Answer 1

Found Documentation and I've manage to add custom route.

ref:https://magento.github.io/pwa-studio/tutorials/pwa-studio-fundamentals/add-a-static-route/