Author avatar

Vivek Kumar

Using React Router Deep Linking

Vivek Kumar

  • Dec 28, 2019
  • 6 Min read
  • 76 Views
  • Dec 28, 2019
  • 6 Min read
  • 76 Views
Web Development
React

Introduction

In today's fast-moving world, every search done over the internet is expected to return results not only accurately, but with little to no lag. There are many features associated with React Router which enable fast and reliable connection between the page element and the client. One such feature is deep linking.

In the context of the World Wide Web, the process of deep linking applies the use of hyperlinks that basically link to a particular, commonly indexed or searchable portion of web content accessible on a website. For instance, you can access a sub-domain of a website by directly traversing to its URL, such as http://example.com/path/page. Or, instead of surfing directly to the sub-domain, you can also start with the home page of the website, http://example.com, and later find the specific location on the webpage to access the /path/page. Deep linking connects users directly to content so they don't have to navigate to find it.

Deep linking, when done correctly, helps get quick results with a single click. Our objective in this guide is to learn to use React Router deep linking. We will discuss standard issues faced during the process and the most prudent solutions to ensure that things work seamlessly each and every time.

So with that, let us proceed!

Deep Linking Issues in Single Page Application (SPA)

Let's take up a case of building a single page application (SPA) with the assistance of React Router. You have created the SPA and successfully navigated through the created pages in the application; let’s say, yoursite.com/about, yoursite.com/work, as well as yoursite.com/work/:project. Now, in the basic navigation of the pages, there is not going to be an evident problem. Even if you are working at the root of your site (like yoursite.com and then clicking on Work, for instance), it is going to render seamless results.

But when it comes to deep linking (for instance, manually entering yoursite.com/about or refreshing the page while navigating on yoursite.com/about), it turns out to be functional on localhost but not over the web hosting site.

Now, the question arises, is it the problem related to the pages of the hosting service provider, or is it a matter concerning React Router?

For one such situation, we can consider the following JS illustration:

1
2
3
4
5
6
7
8
9
10
11
12
13
var routes = (
    <Router history = {history}>
        <Route path = "/" component = {App}>
            <IndexRoute component = {Work} />
            <Route path = "/work" component = {Work} />
            <Route path = "/work/:id" component = {ProjectDetail} />
            <Route path = "/about" component = {About} />
        </Route>
        <Route path = "*" component = {NotFound} />
    </Router>
);

ReactDOM.render(routes, document.getElementById('main'));
jsx

The above code creates paths to various web-page components, such as Work, ProjectDetail, About etc. The code can be treated as a base layout to reproduce the problem. In the next section, we'll learn how to avoid this issue.

Effective Use of React Router for Deep Linking

It is possible to navigate the site through the root—as a matter of fact, all kinds of routing are operated by react-router. All the routing is loaded from the JS files of the root site. However, make sure there is a variation of an HTML file situated in /about/index.html. It is important for you to understand that gh-pages (GitHub pages) hosts the static sites, and proceeding to yoursite.com/about in the absence of an HTML file obviously has a high chance of returning a 404 error on your screen.

Apart from the basic HTML file, it is also suggested to go with the webpack-plugin to make things much easier for you with static site. You can easily access the webpack-plugin from the official website of GitHub. All you are required to do is simply download the plugin from the authorized link and make use of React Router, which makes things much more convenient to handle. The best thing about webpack is that it is not only accessible at GitHub to resolve your deep linking needs, but it also provides various other components responsible for effective coordination and communication between various sections of the final product.

Conclusion

In this guide, you have successfully learned the simple yet basic technique of deep linking through React Router. I hope you do not face problems with this the next time you're working on a SPA.

In particular, we learned how creating a path from the home page to the specific element in an internal page can make information accessibility much easier. We observed a common deep linking issue in a single page application and how it can be resolved with the creation of basic HTML file for the GitHub pages. The availability of comprehensive webpack plugins accessible on the official GitHub site can also fix the problem in the professional context.

0