Skip to main content

Adding navigation

This step consists in transforming a standard React application into a onekijs application and adding the possibility to navigate between pages

Final result​

The result of this step is as follows:

New in this step

You can now click on a product (e.g the "Phone XL" link) to view the product details
. Please note that the URL changes when you click on the link.

Upgrading to an onekijs application​

In order to be able to navigate between pages, we first need to transform the basic react application created in the previous step into an onekijs application.

First add onekijs to your project

yarn add onekijs
Update the entry point (src/index.tsx) to wrap the entire application with the **`onekijs`** <App/> component.

getting-started/cra/step02-navigation/src/index.tsx
loading...

<App /> is the main component that primes the onekijs framework
This component is usually the most external component of an application and is responsible of booting the following components:

ComponentDescription
RouterBy default, it starts a BrowserRouter, but this can be configured.
The router is responsible for managing the navigation between pages
*The router is used in this step.***
Global state managementIt starts a Redux store to manage global state.
The redux store will be used in the next step.
OthersIt starts other components described later on

Adding the routes​

We need to declare the routes so React router can link a Page component to a URL.
The routes are declared in their own file named _router.tsx and can be nested.
For example:

  • Top level routes like /, /users, /products, ... are defined in src/pages/_router.tsx
  • Sub routes like /products/new, /products/:id, /products/:id/edit, ... are defined in src/pages/products/_router.tsx
getting-started/cra/step02-navigation/src/pages/_router.tsx
loading...
getting-started/cra/step02-navigation/src/pages/products/_router.tsx
loading...
Hooks

useRouteMatch is a Hook. Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class
onekijs is heavily based on hooks. Therefore, it's important to understand this concept

Adding navigation​

To navigate between pages, onekijs provides the component <Link/> which replaces the standard HTML tag <a/>

The <Product /> component that displays a product in the product list is updated to use <Link />

const Product: FC<ProductOptions> = ({ product, id, onClick, onNotify }) => {
  return (
    <div>
      <h3>
        <Link href={`/products/${id}`}>{product.name}</Link>
      </h3>
      {product.description && <p>Description: {product.description}</p>}
      <button onClick={onClick}>Share</button>
      {product.price > 700 && (
        <p>
          <button onClick={onNotify}>Notify me</button>
        </p>
      )}
    </div>
  );
};

From now on, a click on the title of a product gives access to the detailed page of this product.

note

The navigation between pages is done entirely on the browser side. There is no call to a web server

Next step​

In the next step, we will add a "shopping cart" page that displays the list of products that the user wants to buy. This feature will allow to introduce the global state of an application.