Sadly this doesn't work out of the box, but there is a simple add-on package that comes to the rescue.

Ok, this is more of a trick than a feature, but you would think creating an anchor link should be simpler than it is.Ī logical assumption would be that would take us to the component and auto-scroll to the 'skills' section. *The slug follows the main domain and explains what the page is: /this-is-the-slugĬompletly new to React Router? Check out the resource links at the bottom to get started on the basics first. In reality, we are still in our trusty index.html file with its content being rapidly replaced based on routing. It looks like we went to a new 'About' page, with a new URL slug* and content. React Router intercepts this request on the client-side and instead renders a new component that we specify.įor example, it would render a component called which in turn holds and children components that make up the content of that 'page'. So we need a way to at least mimic multiple pages in our SPAs. React Router will use the parameter as a wildcard and will match any route that contains that pattern. The URL param is a keyword prefaced with a colon. Therefore we can't request a new page from the server, because we only have access to the index.html file. Instead of making a route for each one, add a URL param to the current path.

However, React is anything but typical and operates only on the client-side. (For example, the /about route would deliver the about.html file.) Typically when we navigate to a new page, the client (browser) sends a request to the server and indicates that a particular route (page) needs to be accessed. React Router is a game-changing package that allows us to turn our React SPA (single page application), into a virtual 'multi-page' experience. Today we will take a quick look at what it does and then dive into 5 features and tricks that I feel are pretty remarkable. I love React Router and how it truly expands the use case for React.

React router dom url params