Step 9

The Zirectory application is complete in terms of its functionality. We will now polish the source code by changing/adding a few things.

First, let's replace anchor elements (HTML <a> element) with react-router-dom Link component.

The Link component allows you to pass query parameters or link to specific parts of a page. It also allows you to pass "state" to the Component which you want to navigate to.

Open ListMeetings.js and import the Link component:

import { Link } from "react-router-dom";

Now update the anchor element to a Link component

- <a href="/create" className="add-meeting">Add Meeting</a>
+ <Link to="/create" className="add-meeting" />

Notice the href attribute on a element is changed to to props on the Link component.

Open CreateMeetings.js, import the Link component, and update the anchor element to a Link component:

- <a href="/" className="close-create-meeting">Close</a>
+ <Link to="/" className="close-create-meeting" />

Save the file and revisit the app in your browser; everything must look and function as before!