Navigating in single page-apps explained easily with great examples? This is it! Follow this course on React for full-stack developers to learn how.

#programming #tech #softwaredevelopment

Repository: https://github.com/Drakemor/ReactFrom...
Start Commit: https://github.com/Drakemor/ReactFrom...
End Commit: https://github.com/Drakemor/ReactFrom...

.htaccess file: https://github.com/Drakemor/ReactFrom...

https://stackoverflow.com/questions/2...

Today we’ll cover how to build navigation and routing in our app and we’ll install our first dependency. This will allow us to set up a simple website with a few sub pages.

Let’s start quickly by creating two components: a NavBar component which will contain few links to our subpages, and a Page component which will render something within a div.

Let’s import these and see this working - I have a navigation component that is included in the rendered page. It’s ugly, but it works. Don’t worry - we’ll address that too, but in another video. Moving on to the Page component.

Children is a special prop - to set its value we can either do it as usual - with an XML attribute, or we can wrap the value between opening and closing tags.

Let’s try this out in the App component: adding three Page components and some dummy text. After saving we can see that all of them are visible on the page. That’s all great, but we need to only show them when the user clicks on the right link. How to do that?

We’re going to use react-router-dom. This is a node package that we can add with a single command: npm install react-router-dom. Let’s do it. I’m going to stop the server with Ctrl+C, run the command to add the package and restart the server. This may take a few minutes, because node packages tend to be very verbose. Expect quite a few warnings too.

Alright. Restarting the server. To use the router package all we have to do is import appropriate symbols from the module. We do it in App.js like so:
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
Now we can wrap everything in the App in a Router component. Next we wrap our subpage components in Switch, and create three Routes that will encompass what should be displayed when a specific URL is being accessed by the user.

Each route should have two props: path and children. Route components will be checked by BrowserRouter and if the pattern specified in path prop is matching the current URL its children will be rendered.
Let’s fill the path properties with values we specified in our NavBar and see what happens. /a, /b, and /c.

Okay, the subpages are gone, now we can click on the links… On the surface - everything seems to work correctly - each subpage is only displayed when the URL matches the path.

We replicated the functionality of plain HTML pages, and that’s great, but React allows us to go further, and avoid unnecessary reloading from the server, each time we click on a link.

It’s really simple - all we have to do is import a Link component from react-router in our NavBar and replace plain HTML anchor tags with it. Our href attribute will become a “to” prop. Great, now we can no longer see the refresh happening.

It’s almost perfect, but unknowingly we created another issue that is impossible to notice just yet. Routing is now done in the browser, by javascript. Webpack server that we use locally for development is smart enough to know that if url typed in the address doesn’t exist as a static asset (it’s not a css file, or jpg | present in public directory) - it should just fallback to index.html and you will see the right route even if you type in this url manually. Sadly this isn’t the case for many other servers which you might be using for your production website.