Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Using React Router with CDN Links

To learn and explore React Router as a beginner, you can use a simple CDN setup without the hefty webpack configuration.

Nov 7, 2020 • 6 Minute Read

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.

      <!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
  </head>
  <body>
    <div id='root'></div>
    <script type='text/babel'>

    </script>
  </body>
</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

      <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>

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.

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

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:

      const Link = ReactRouterDOM.Link;
const Route = ReactRouterDOM.Route;

Creating the App Component

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

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

Next, add a few links inside this component.

      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>
)

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.

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

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.

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

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.

      <!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>

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.