SEO Friendly Route in React

 Hi Folks,

This is a software developer writing about “How to create dynamic route SEO friendly.”

Many times it needs for a website to have a route such that some special keywords need to apply so that it can improve that website rating on google search engine. For that, we as a developer have to keep it in mind while developing that “the route should be SEO friendly so that SEO team won’t get issues on rating the website and much more”.

When I was working on this first time, I researched a lot, and finally, I got a straightforward solution in React. React provides us a Higher-order component “Route” which provides us accessing the history and location of a parent component. If you want the react props inside a child component then you have to use “withRouter”. Wrap your child component using withRouter and then you can access react props inside it.

There are two types of routing that SEOs prefer:

  1. when you are fixing variables in URL separated by slashes. For Example, http://www.google.com/someroute/someotherroute/moreroutes/ So Here http://www.google.com is a domain name and the keywords you after that between slashes are the routes you want to make while going inside the website by clicking on links.

This works as you fixed the keyword someroute when clicked, it came just after the domain name and when someotherroute clicked it came at second position after the domain name, and so on …

It is very easy to do this, just follow step by step,

First, while defining your component inside route in the main component, give the route name followed by a colon “:”. Like, “/:Id”. It should make your route dynamic. Route name would be more than one also like “/:id/:name”. Provide as many keywords you want to show on a click but keep in mind that the link where you are clicking should also have the same number of keys separated by slashes so that it took place to their route correctly. When you are defining the dynamic route keep that route at bottom of all routes. For Example:-

Defining route in the main component:

<Route exact path=”/:id/:name” component={somecomponent}/>

when you are clicking on a link:

<Link to=”/1/somename”>Label</Link>

When you click on this link. It will redirect you to the component of somecomponent and the route generated for that component will be http://domain_name.com/1/somename

2. when you want to create your route like a breadcrumb. The route will be in the same series as the path you follow to reach there. For Example,

https://www.domain_name.com/someroute/someotherroute/moreroute

Like you enter in the domain_name, then you click on someroute, then on someotherroute and then on moreroute.

This type of URL generates according to your path you follow….

For these types of routes, follow this example code …

Image for post

Now, Lastly, you need to know this “How to get routes keywords without using the string manipulation in a particular component”. For that just use this code,

this.props.match.params in class-based and props.match.params in a functional component. You will find an object containing your key as a defined route and value as a route from url.

Finally, you are done creating a dynamic route of your choice.

This is the basic concept of applying. It can be used in different ways according to your project needs. So bare with the concept and on your own to achieve the final desirable output.

Thank You.

Comments

Post a Comment

Popular posts from this blog

Demystifying the "Mod_Security" Error: An In-Depth Analysis

Image
  Introduction: In the realm of web development and server administration, encountering errors is an inevitable part of the journey. One such error that often perplexes users and developers alike is the "An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security." error. In this blog post, we will embark on a journey to understand this error in detail, unravel its underlying causes, and explore potential solutions. Understanding the Mod_Security Error: The error message itself, while cryptic, provides some valuable clues. It indicates that the server's ModSecurity module has detected an issue with the requested resource and has subsequently blocked access. But what is ModSecurity, and why does it sometimes hinder our legitimate requests? ModSecurity: A Guardian of Web Applications ModSecurity is an open-source web application firewall (WAF) that acts as a barrier between your web application and pote...
Read more

Comparing Application Sizes: ReactJS vs. SolidJS

Image
  Comparing Application Sizes: ReactJS vs. SolidJS When choosing a front-end framework, one of the critical factors to consider is the application bundle size. Smaller bundle sizes generally lead to faster load times and better performance, particularly on slower networks or less powerful devices. In this blog, we will compare the bundle sizes of simple applications created with ReactJS and SolidJS, using their respective CLI tools. We will also provide a step-by-step guide on how to create, build, and analyze these applications. Table of Contents Introduction to ReactJS and SolidJS Creating a ReactJS Application Creating a SolidJS Application Building the Applications Comparing the Bundle Sizes Conclusion 1. Introduction to ReactJS and SolidJS ReactJS ReactJS is a widely-used JavaScript library for building user interfaces, particularly single-page applications. Created by Facebook, React allows developers to create reusable UI components and manage the state efficiently. Pros : R...
Read more

Exploring onMount in SolidJS vs useEffect in ReactJS

Image
  🚀 Exploring onMount in SolidJS vs useEffect in ReactJS When developing with modern frontend frameworks, managing side effects is crucial. Both SolidJS and ReactJS provide elegant ways to handle side effects, but they do so in different ways. In this post, we’ll explore onMount in SolidJS and useEffect in ReactJS with cool examples and diagrams. 🌟 SolidJS: onMount What is onMount? In SolidJS, onMount is a lifecycle hook that allows you to run side effects when a component is first rendered. It's a straightforward way to execute code exactly once during the component's lifecycle, making it ideal for initialization tasks like API calls or setting up subscriptions. Example: Fetching Data Once on Mount Diagram: SolidJS onMount Flow 🔥 ReactJS: useEffect What is useEffect? In ReactJS, useEffect is a hook that manages side effects in function components. It allows you to perform actions like data fetching, subscriptions, or manually changing the DOM. useEffect runs after the ...
Read more