React-routing and pages..

 

Now that we have our:

1. React project setup (see link if you haven't already) 
2. Routing setup (see link if you have already) 
3. Home page cards setup (see link if you haven't already) 

We need to create our page and a way for the user to get there. 

So from the other posts we know that we can add a link and a route for that link but how does that link connect to a page or a component to render for the user. 

So we know that the route can take an element and this is where our page or component comes in. That element will be the new page. I am going to focus on the Contact Us route in this example as its very simple. Here is the example of the ContactUs component: 

This component can be anything you like it can hold the HTML to render for your next page. So for example this component renders the Contact us header and a iframe which is actually a google form for the user to submit and give feedback/ suggestions. For you, you just need to worry about:

•  export default class ContactUs extends Component {
• render() {
• return (
• your html
• )}}

These are the main things you need to have in your new component. Now it doesnt need to be called ContactUs it can be called whatever you want it to be. Yugiohpage, Musicpage, Eggs it really doesnt matter. As long as its readable and understandable to you or your company. Im sure there are some naming standards out there somewhere but lets not worry about that. 

Once you have this component created. We can go back to the element in our routing and add that component, depending on the IDE you use. If you start typing the syntax <ContactUs /> it should import it for you, if it doesnt jsut head to the top of your Navigation component and import it manually. 

Now you have added this to your route. You can now hit the path you have specifed for that element and it will render your new component. With this you can add the URL to buttons, to the Nav Bar. Whereever you need it. 

Here is my example of the URL being used in the Nav bar.

Hopefully this helps you get your first component an routing up and running. 

Scott