- You are using the code from the lesson item titled The Navbar. Your goal is to add another link to the existing code. This link should show a brand new component, named Contact. So, add a new file,
Contact.js
, to the root of thesrc
folder. - Inside the
Contact.js
file, add an ES5 function, namedContact
. The theexport default Contact
after theContact
function's closing curly brace. - Inside the body of the
Contact
function, add a return statement with the following code:<h1>Contact me on this page.</h1>
. - Inside the App.js file, import the newly-built Contact component.
- Inside the App.js file's App function's return statement, locate the
nav
element, and inside of it, add another<Link>
element, with theto
attribute pointing tocontact
, theclassName
set to"nav-item"
, and the the text inside the Link element's opening and closing tags set toContact
. - Inside the
Routes
element, add a third route, with thepath
attribute pointing to"/contact"
, and theelement
attribute set to{<Contact />}
. - Save all your changes and view your updates in the served app. You should have three links in the top navbar, and the third link should be
Contact
. Once you click the link, the sentence "Contact me on this page" should replace whatever other content was under the navbar previously.
This project was bootstrapped with Create React App.
- Open the built-in terminal
- Run
npm install
to add thenode_modules
folder - Run
npm start
- Click the "Open Development server" in the bottom status bar to view the running react app in the browser.