You want to learn React Router ?, I am learning React Router, come learn along :)
I recently had an epiphany : You can read the manuals or docs, or dive into some tutorial project code in hopes something might stick, but getting your hands dirty in small,incremental steps is more rewarding,even fun, and codepen is an ideal place to do so.
These pens are small code nuggets that follow my own learning, before each one I’ll tell you what I set out to learn, the challenge I gave myself along with my learning experience, I believe by redoing my own challenges you too can learn, and if you get stuck you can always consult my own.
Note: This is some intermediate React Stuff, check out my previous posts if you are just starting out:
I am not sure at this point, something to do with sending folks to different pages depending on where they click and using React Components along the way, that sounds about right.
First let’s try setting up a home page, where a simple component will be displayed through react router:
My/Your Challenge: Import react router and display a HomeComponent
See the Pen React Router Home Route by Eugenio - Keno - Leon (@k3no) on CodePen.
Well now let’s see how we can send folks to different routes, or in this case different components and return them safely to the main page.
My/Your Challenge: Create a home page with links to other pages/components and use the router to navigate to them and back
See the Pen React Router Links by Eugenio - Keno - Leon (@k3no) on CodePen.
But how would we reuse say a navigation bar ? is there a react-router way ?, let’s find out:
My/Your Challenge: Create a navigation bar with links to other components/pages with React Router
See the Pen React Router Nav by Eugenio - Keno - Leon (@k3no) on CodePen.
Ahhhh, so rendering Router allows you to treat it as a component and thus be able to nest children like any other component, it sounds a little confusing, but if you write the example above it becomes clearer how useful it can be.
And how would one let know the components where they are ? let’s investigate active links:
My/Your Challenge: Create a navigation bar with active links
See the Pen React Router Active Links by Eugenio - Keno - Leon (@k3no) on CodePen.
React-router provides a handy active class or style flag to allow for active styles, neat.
As the name implies, urls can have specific params associated with them, so an user or section name could be used to inform the component by passing a param. it all sounds a little confusing, so let’s try an example:
My/Your Challenge: Create a navigation bar with links that include params and are used by a component
See the Pen React Router Params by Eugenio - Keno - Leon (@k3no) on CodePen.
The text style in the above example is set by the name param which is created in the fly in the navigation bar.
Like many things in the programming world, it makes more sense if you follow the param or variable around an look at how the system is set up, check the source, but it’s utility should become apparent.
One issue you might have noticed, is that a navigation component can’t call a Home or Index Route upon being loaded, an Index Route, and a corresponding IndexLink help to this purpose, to see the difference, you can add some text to our third example ( nesting routes) in the navigation component, it will repeat in each section, not something we want,so:
My/Your Challenge: Create a navigation bar component, and both a home or index section and a couple of other sections and link them using the IndexRoute and Active Links
See the Pen React Router IndexRoute by Eugenio - Keno - Leon (@k3no) on CodePen.
So as you can see we now have the behavior most web pages with a menu structure require via components and routes, and more importantly a fairly good understanding of what React-Router does and how to get started using it.
There is of course more complexity and features to React-Router, but this being an introduction, I hope you at least get the gist of it.
I would recommend consulting the project page for more:
Best,
Keno.