Gaurav Singhal

Using React Router with CDN Links

Gaurav Singhal

Nov 7, 2020
6 Min read
191 Views

Nov 7, 2020
6 Min read
191 Views

Web Development

Front End Web Development

Client-side Frameworks

React

Introduction

When you are learning a new library or exploring new concepts in development mode, using CDNs can come in handy as they require minimal setup and get you up and running with only a few lines of code. To learn and explore React Router as a beginner, you can use a simple CDN setup without the hefty webpack configuration. In this guide, you'll learn how to use React and React Router using CDN links.

Setting up

Create a new file called index.html with the following boilerplate.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
  </head>
  <body>
    <div id='root'></div>
    <script type='text/babel'>

    </script>
  </body>
</html>

html

The <div> inside the <body> is where your React App's DOM goes. The <script> following the <body> is where you can write your regular JavaScript to React. Next, include the CDN links as scripts for React, ReactDOM, React-Router-DOM, and Babel, as shown below

1
2
3
4
5
6
7
 <head>
    <meta charset='UTF-8'>
    <script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'>    </script>
    <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
  </head>

html

Now you are ready to use React and React-Router-DOM inside this HTML file.

Importing React Router Elements

React Router offers components such as HashRouter, Route, Link, and so on for different purposes. Inside a regular React-CLI (Create-React-App) project, install react-router-dom as a dependency and import the components, as shown below.

1
import {Route,Link, HashRouter} from 'react-router-dom';

javascript

However, inside a regular JavaScript file, you need to call these components as properties of the ReactRouterDOM global object available via the CDN (React-Router-DOM's script) and assign it to a variable to use it. So in order to use the Link and Route components, you need to do the following:

1
2
const Link = ReactRouterDOM.Link;
const Route = ReactRouterDOM.Route;

javascript

Creating the App Component

Let's create a simple hooks component, the App Component, as shown below, and render it on the DOM.

1
2
3
4
 const App = () => (
       
 )
ReactDOM.render(<App />, document.querySelector('#root'));

javascript

Next, add a few links inside this component.

1
2
3
4
5
6
7
8
9
const App = () => (
        <ReactRouterDOM.HashRouter>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/login">Login</Link></li>
            <li><Link to="/register">Register</Link></li>
          </ul>
        </ReactRouterDOM.HashRouter>
)

javascript

The HashRouter component is directly invoked from the ReactRouterDOM global object. This is another method of requiring React-Router-DOM components, in addition to the method shown in the previous section.

Finally, set up some simple routes, as shown below.

1
2
3
 <Route path="/" exact component={Home} />
 <Route path="/login" component={Login} />
 <Route path="/register" component={Register} />

javascript

Creating Child Components

On requesting the route /login, the Route component renders the Login Component. Create these child components to show a different message every time their route is requested.

1
2
3
 const Home = () => <h1>Home</h1>
 const Login = () => <h1>Login</h1>
 const Register = () => <h1>Register</h1>

javascript

Run this HTML file and click on the login link. The current route changes to /login instead of / and the Login component is rendered. Similarly, the Register component can be rendered by clicking on the register link.

Have a look at the entire index.html file below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
  </head>
  <body>
    <div id='root'></div>
    <script type='text/babel'>
      const Link = ReactRouterDOM.Link;
      const Route = ReactRouterDOM.Route;

      const App = () => (
        <ReactRouterDOM.HashRouter>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/login">Login</Link></li>
            <li><Link to="/register">Register</Link></li>
          </ul>

          <Route path="/" exact component={Home} />
          <Route path="/login" component={Login} />
          <Route path="/register" component={Register} />
        </ReactRouterDOM.HashRouter>
      )

      const Home = () => <h1>Home</h1>
      const Login = () => <h1>Login</h1>
      const Register = () => <h1>Register</h1>

      ReactDOM.render(<App />, document.querySelector('#root'));
    </script>
  </body>
</html>

html

Conclusion

Using CDNs for development offers a faster development environment where you can explore and experiment according to your needs. It also comes in handy when you are developing only a backend app by serving HTML files so you don't need to separately set up a frontend project consuming it. You can explore large React Libraries like Redux via CDN first to save time, and then use them inside your Create-React-App project. If you have any queries, feel free to contact me at CodeAlphabet.

LEARN MORE