index.md

Add a Static Route

Overview

In this tutorial we will add a custom static route which loads your own custom REACT component.

Adding the Static Route

To add a static rout we need to first override and customise the component responsible for rendering routes.

Copy the App and Routes components from the @magento/venia-ui package.

mkdir src/components
cp -R node_modules/@magento/venia-ui/lib/components/App src/components/
cp -R node_modules/@magento/venia-ui/lib/components/Routes src/components/

Now lets correct the import statements within the App component you just copied to use @magento/venia-ui package, where necessary.

Open /src/components/App/app.js and change the import statements to: - use the files from within your local App/ directory. - use full @magento/venia-ui/ paths for files you do not have in your local project.

So the beginning of the file will look something like the following:

import React, { useCallback, useEffect } from 'react';
import { array, func, shape, string } from 'prop-types';

import { useToasts } from '@magento/peregrine';
import { useApp } from '@magento/peregrine/lib/talons/App/useApp';

import { HeadProvider, Title } from '@magento/venia-ui/lib/components/Head';
import Main from '@magento/venia-ui/lib/components/Main';
import Mask from '@magento/venia-ui/lib/components/Mask';
import MiniCart from '@magento/venia-ui/lib/components/MiniCart';
import Navigation from '@magento/venia-ui/lib/components/Navigation';
import Routes from '../Routes';
import { registerMessageHandler } from '@magento/venia-ui/lib/util/swUtils';
import { HTML_UPDATE_AVAILABLE } from '@magento/venia-ui/lib/constants/swMessageTypes';
import ToastContainer from '@magento/venia-ui/lib/components/ToastContainer';
import Icon from '@magento/venia-ui/lib/components/Icon';

import {
    AlertCircle as AlertCircleIcon,
    CloudOff as CloudOffIcon,
    Wifi as WifiIcon,
    RefreshCcw as RefreshIcon
} from 'react-feather';

Next open /src/components/Routes/routes.js and similarly change it's import statements something like the following:

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

import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
import MagentoRoute from '@magento/venia-ui/lib/components/MagentoRoute';

const CreateAccountPage = lazy(() => import('@magento/venia-ui/lib/components/CreateAccountPage'));
const Search = lazy(() => import('@magento/venia-ui/lib/RootComponents/Search'));

Next, in the same file, before the MagentoRoute route add the following static route with inline JSX:

<Route exact path="/foo.html" render={() => <h3>Hello World JSX.</h3>}/>

Now, lets use your new custom App component in your application by opening /src/index.js and changing

import App, { AppContextProvider } from '@magento/venia-ui/lib/components/App';

to

import App, { AppContextProvider } from './components/App';

Browse to the /foo.html URL in the application.

Creating a custom REACT component

Now we will replace the inline JSX with a custom REACT component.

Start by adding the following files...

/src/components/Foo/index.js

export { default } from './Foo';

src/components/Foo/Foo.js

import React, { useEffect } from 'react';

const Foo = () => {

  useEffect(() => {
    document.title = 'Foo Test Page';
  }, []);

  return (
    <h1>Hello Foo Component</h1>
  );
}

export default Foo;

Return to the routes.js file and import the Foo component and update the route you previously added with it.

/src/components/Routes/routes.js

// place beneath the other import statements
const Foo = lazy(() => import('../Foo'));
 
// other code...
 
<Route exact path="/foo.html" component={Foo}/>

Browse to the /foo.html URL in the application.

Learn More

• Introducing JSX
• Function and Class Components in REACT
• Introducing React Hooks

---

• > see other topics