Pages (Routing)

Here we go ! Now we have to make pages and a way to switch between em smoothly, that’s the job of the react-router package.

it helps to creates urls in navigation bar, preserving browsing history making sure that the “go back” button and bookmarks works properly.

No worries, Routing is something very very simple.

Get started by installing the package to our project with :

npm install --save react-router-dom

Create pages

create a new folder and our first page in

/src/pages/CreateWalletPage.js

import React from 'react';
import Button from '../components/common/Button'
import Container from '../components/common/Container'

function Alert() {
    alert("click from CreateWalletPage.js")
   }

function CreateWalletPage(props) {
    return (
        <Container
        containerTitle='Create new Wallet'
        containerContent='hungry sign invite enlist taxi decade whisper life animal provide swallow angle issue tool almost purchase cruise palace bulk soft elite castle jar valley'
        containerBottom={<Button handleClick={Alert} btnText="Continue" />}>
      </Container>
    );
   }

export default CreateWalletPage;

/src/pages/RestoreWalletPage.js

import React from 'react';
import Button from '../components/common/Button'
import Container from '../components/common/Container'

function Alert() {
    alert("click from RestoreWalletPage.js")
   }

function RestoreWalletPage(props) {
    return (
        <Container
        containerTitle='Restore wallet'
        containerContent='Paste mnemonic'
        containerBottom={<Button handleClick={Alert} btnText="Restore" />}>
      </Container>
    );
   }

export default RestoreWalletPage;

Components path issues

Notice that the import path changed for our Container and Button import. Since we changed folders, we need to specify by adding ../ that the framework need to go back one folder than the actual one.

Our previous import for button :

import Button from './components/common/Button'

gives :

Module not found: Can’t resolve ‘./src/components/common/Button’ in ‘C:\sample-react-project\src\pages‘.  So we changed it to :

import Button from '../components/common/Button'

We reused our Container component for creating two pages !

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

Now we can remove the Container one from our App.js and add our routing (page switch) instead

Creating a two action menu

For navigating between the two pages we have to use our previously imported <Router>. the <Link/> refers to our horizontal menu and the <Route/> refers to the linked component to go to. You can check the official Router package documentation for additional examples

function App() {
  return (
    <div className="App">
      {/* Wallet action navigation */}
      <Router>
        <div>
          <div className="wallet--nav">
            <div className="wallet-nav-action">
              <Link to="/">Create new wallet</Link>
            </div>
            <div className="wallet-nav-action">
              <Link to="/restore">Restore wallet</Link>
            </div>
          </div>
        {/* Page Content will be displayed here */}
          <Switch>
            <Route exact path="/">
              <CreateWalletPage />
            </Route>
            <Route path="/restore">
              <RestoreWalletPage />
            </Route>
          </Switch>
        </div>
      </Router>
    </div>
  );
}

Stylise our horizontal menu

.wallet--nav {
  display: inline-flex;
  list-style: none;
}
.wallet-nav-action {
  margin:20px;
 }
.wallet-nav-action a {
 color:white;
 text-decoration: none;
}

You now know how to switch between pages !

Resources :

Official react-router doc

Important note

On the next part we will learn how to integrate the safecoin web3js library, there is a possibility that we will learn something else before integrating it.

Why ? I’m actually learning the library (and a lot to understand), so if i’m finding something really important to explain about React and his framework we will have to continue this way for a bit.