React Router

Agenda

• Single-Page Application
• Single-Page Application Pros and Cons
• Server Side rendering
• React Router

SPA*

Traditional Web Application

What is SPA?

A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.

SPA "+" and "-"

SPA "+"

• Fast and responsive design.
• Adaptable layout.
• Caching capabilities.
• Continuous UX and brand storytelling.
• A reduced throughput.

SPA "-"

• Poor SEO optimization.
• Difficulties in the development process.
• Poor link sharing capability.
• Poor app performance on low-end devices.
• Security issues.
• A/B testing is difficult.

SSR*

SSR

Server-side rendering (SSR) is a popular technique for rendering a normally client-side only single page app (SPA) on the server and then sending a fully rendered page to the client. The client’s JavaScript bundle can then take over and the SPA can operate as normal.

Why SSR?

• SEO optimization
• Performance

SSR Examples

• ReactDOMServer
• Electrode

and many more...

React Router*

What do we want?

• Change the URL when you navigate to a different screen​.
• Deep linking should work​.
• Browser navigation should work like expected.
• React-like programming style.
• Server side rendering.

What is React Router?

Declarative routing for React

Declarative programming

Imperative programming is a programming paradigm that uses statements that change a program’s state.

Declarative programming is a programming paradigm … that expresses the logic of a computation without describing its control flow.

Imperative

          if (route === routeA)...
          else if (route === routeB)...
        

Declarative

          <RouteA />
          <RouteB />
        

Static vs Dynamic routing

Main Components

• BrowserRouter (aka as Router)
• Link
• Route
• Switch

define router

            import React from 'react'
            import ReactDOM from 'react-dom'
            import { BrowserRouter as Router } from 'react-router-dom'

            ReactDOM.render(
            <Router>
              <div>
                <!-- -->
              </div>
            </Router>,
            document.getElementById('app'));
        

define links

            import React from 'react'
            import ReactDOM from 'react-dom'
            import { BrowserRouter as Router, Link } from 'react-router-dom'

            ReactDOM.render(
            <Router>
              <div>
                <aside>
                  <Link to='/dashboard'>Dashboard</Link>
                  <Link to='/about'>About</Link>
                </aside>
              </div>
            </Router>,
            document.getElementById('app'));
        

router types

• BrowserRouter for '/url/path'
• HashRouter for '/#/url/path'
• MemoryRouter for non-browser

define components

            const Dashboard = () => (
            <div>
                <h2>Dashboard</h2>
                ...
            </div>)

            const About = () => (
            <div>
                <h2>About</h2>
                ...
            </div>)
        

use components

          <Router>
            <aside>
              <Link to={`/`}>Dashboard</Link>
              <Link to={`/about`}>About</Link>
            </aside>
    
            <Route exact path="/">
              <Dashboard></Dashboard>
            </Route>
            <Route path="/about">
              <About></About>
            </Route>
          </Router>
        

match dynamic parameter

            const Post = () => {
            const { id } = useParams();
            // or
            const matchedId = useRouteMatch("/post/:id");
            return (
              <div>
                <h2>Post #{id} or {matchedId}</h2>
                ...
              </div>);
            }
            //...
            <Route exact path="/post/:id">
              <Post></Post>
            </Route>
        

exact matching

          <Switch>
            <Route path="/">
              <Dashboard></Dashboard>
            </Route>
            <Route path="/about">
              <About></About>
            </Route>
          </Switch>
        

Server Side Rendering

using StaticRouter

          // client
          <BrowserRouter>
            <App/>
          </BrowserRouter>
        

          // server
          <StaticRouter
            location={req.url}
            context={context}
          >
            <App/>
          </StaticRouter>
        

Thank you for listening!

Please, ask questions!