Adding routing

The tool we are going to use is called React Router, maintained by React Training (https://reacttraining.com/react-router/web).

Integrating routing support is straightforward. Let's learn how to do this for our Electron project:

  1. Stop the application if it's running and install the library using the following command:
npm install react-router-dom

  1. Now, we are going to have some simple Screens or Views backed by two routes: Index and Files. Update the App.js file with the following functional components:
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Index() {
return <h2>Home</h2>;
}

function Files() {
return <h2>Files</h2>;
}
  1. We have just imported a few types from the react-router-dom package. One of these is a Link component, which allows us to navigate to a particular route. For example, you can create a Hyperlink element that points to the /files/ URL fragment using the following syntax:
<Link to="/files/">Files</Link>
  1. First, update the navbar code according to the following listing:
<Navbar className="bp3-dark">
<Navbar.Group align={Alignment.LEFT}>
<Navbar.Heading>Blueprint</Navbar.Heading>
<Navbar.Divider />
<Button className="bp3-minimal" icon="home">
<Link to="/">Home</Link>
</Button>
<Button className="bp3-minimal" icon="document">
<Link to="/files/">Files</Link>
</Button>
</Navbar.Group>
</Navbar>
  1. Now, modify its main content, as follows:
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />

<Route path="/" exact component={Index} />
<Route path="/files/" component={Files} />
</header>
  1. Run the application and try clicking the Home and Files links in the application menu component. Notice how the content of the page reflects the route you click:

At this point, you have a nice Electron application based on React with routing and UI library support up and running. Feel free to make a backup of this project in its current state so that you can use it for similar applications in the future.

Let's see what else we can do to improve the look and feel of the application.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.222.155.58