React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

To build single-page apps, we have to have some way to map URLs to the React component to display.

In this article, we’ll look at how to create 404 routes and recursive paths with React Router.

404 Routes

We can create 404 routes to show something when none of the routes we added are matched.

To do this, we can use the asterisk as a wildcard character.

For example, we can write the following code;

import React from "react";  
import ReactDOM from "react-dom";  
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

function Foo() {  
  return <h3>Foo</h3>;  
}

function Bar() {  
  return <h3>Bar</h3>;  
}

function NotFound() {  
  return <h3>Not Found</h3>;  
}

function App() {  
  return (  
    <Router>  
      <div>  
        <ul>  
          <li>  
            <Link to="/">Foo</Link>  
          </li>  
          <li>  
            <Link to="/bar">Bar</Link>  
          </li>  
          <li>  
            <Link to="/doesnt-exist">Doesn't Exist</Link>  
          </li>  
        </ul> <Switch>  
          <Route exact path="/">  
            <Foo />  
          </Route>  
          <Route path="/bar">  
            <Bar />  
          </Route>  
          <Route path="*">  
            <NotFound />  
          </Route>  
        </Switch>  
      </div>  
    </Router>  
  );  
}

const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);

In the code above, we have the Switch component that has the following Route:

<Route path="\*">  
    <NotFound />  
</Route>

It’ll match any URL that doesn’t match the other routes.

Therefore, when we click the Doesn’t Exist link, we’ll see Not Found.

This also applies when we type in anything other / or /bar as the relative path.

The * is the wildcard character for matching anything.

Recursive Routes

Just like any other routes, we can define routes recursively. The only difference is that we reference the component within the Route with itself.

For example, if we have an array of NEIGHBORS as follows:

const NEIGHBORS = [  
  { id: 0, name: "Jane", neighbors: [1, 2, 3] },  
  { id: 1, name: "Joe", neighbors: [0, 3] },  
  { id: 2, name: "Mary", neighbors: [0, 1, 3] },  
  { id: 3, name: "David", neighbors: [1, 2] }  
];

where the neighbors array references the id of the other entries.

Then we can define a Neighbor component and use it as follows:

import React from "react";  
import ReactDOM from "react-dom";  
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";  
import { useParams, useRouteMatch, Redirect } from "react-router";

const NEIGHBORS = [  
  { id: 0, name: "Jane", neighbors: [1, 2, 3] },  
  { id: 1, name: "Joe", neighbors: [0, 3] },  
  { id: 2, name: "Mary", neighbors: [0, 1, 3] },  
  { id: 3, name: "David", neighbors: [1, 2] }  
];

const find = id => {  
  return NEIGHBORS.find(p => p.id === id);  
};

function Neighbor() {  
  const { url } = useRouteMatch();  
  const { id } = useParams();  
  const neighbor = find(+id); return (  
    <div>  
      <h3>{neighbor.name}’s neighbors</h3> <ul>  
        {neighbor.neighbors.map(id => (  
          <li key={id}>  
            <Link to={`${url}/${id}`}>{find(id).name}</Link>  
          </li>  
        ))}  
      </ul> 
      <Switch>  
        <Route path={`${url}/:id`}>  
          <Neighbor />  
        </Route>  
      </Switch>  
    </div>  
  );  
}

function App() {  
  return (  
    <Router>  
      <Switch>  
        <Route path="/:id">  
          <Neighbor />  
        </Route>  
        <Route path="/">  
          <Redirect to="/0" />  
        </Route>  
      </Switch>  
    </Router>  
  );  
}

const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);

In the code above, we have the find function to make find neighbors easy.

Then in the Neighbor component, we have:

const { id } = useParams();  
const neighbor = find(+id);

to get the id from the URL, and then find the neighbor with it using the find function.

Then we display the neighbors of the neighbor by writing:

<ul>  
    {neighbor.neighbors.map(id => (  
    <li key={id}>  
        <Link to={`${url}/${id}`}>{find(id).name}</Link>  
    </li>  
    ))}  
</ul>

Then we have a Switch component that has Neighbor again in the Route :

<Switch>  
    <Route path={`${url}/:id`}>  
        <Neighbor />  
    </Route>  
</Switch>

This is the part that’s recursive, since Neighbor references itself here. We set the path to `${url}/:id` so that when the Link s above is clicked, we’ll see the new neighbors.

Then in App , we just have the usual routes. Once again, we have path=”/:id” to find a neighbor by id .

Conclusion

We can define 404 routes easily by setting the path ‘ value of the Route to an asterisk.

To define recursive routes, we can reference routes within itself. It’s treated no differently than any other kind of route.

React is a library for creating front-end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

In this article, we’ll look at how to make apps load faster by splitting code so that only the parts that are needed will load.

Code-Splitting

We need code-splitting so that product React bundles won’t be too big. As our apps get bigger, the production bundles will also get bigger and take longer to load if we don’t split them and load them only when needed.

Create React App has code-splitting support built-in. We can use the lazy and import functions from React to achieve this.

For example, we can use those functions as follows:

Foo.js:

import React from "react";export default function Foo() {  
  return <div>foo</div>;  
}

App.js:

In the code above, we have Foo.js with the Foo component.

Then, in App.js, we have the App component that has Suspense to load the fallback. UI has the Foo import loads. We need this since Foo is loaded at runtime.

React.lazy loads the Foo component at runtime instead of at build time. It also splits the code from the bundle into a separate file so that each bundled file is smaller.

We’ll get an error telling us to add a fallback UI with the Suspense component if it’s missing.

The fallback prop accepts any React element that we want to render while waiting for the component to load. We can place Suspense anywhere above the lazy component.

Wrapping multiple elements in a single Suspense element also works.

Error Boundaries

To fail gracefully when other modules fail to load, such as where network failure occurs, we can use error boundary components.

To use them, we wrap them around the Suspense component as follows:

ErrorBoundary.js:

Foo.js:

import React from "react";

export default function Foo() {  
  return <div>foo</div>;  
}

App.js:

In the code above, we added the ErrorBoundary component in ErrorBoundary.js.

Then, in App, we wrapped it around our Suspense component, which lets us catch any errors that occur when loading the Foo component.

Route-Based Code-Splitting

Many React apps are single-page apps. They’ll have routes to map URLs to components.

We can split code based on routes. For example, we can incorporate React Router routes into our app and split code based on routes as follows:

Foo.js:

import React from "react";

export default function Foo() {  
  return <div>foo</div>;  
}

Bar.js:

import React from "react";

export default function Bar() {  
  return <div>bar</div>;  
}

App.js:

In the example above, we add the Router component around all our components.

We put the Routes inside the Suspense component so that they can be lazy-loaded. That is, they load only when we load the route in our browser.

This is also why we need the Suspense component around the routes. We need the fallback UI so that it’ll be shown when the routes are loading.

Named Exports

React.lazy only supports default exports. If our module uses named exports, then we have to create an intermediate module that re-exports it as default.

For example, we can arrange our code as follows:

Foo.js:

import React from "react";

export const Foo = function() {  
  return <div>foo</div>;  
};

FooDefault.js:

import { Foo } from "./Foo";

export default Foo;

App.js:

import React, { Suspense } from "react";
const FooComponent = React.lazy(() => import("./Foo"));
export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <FooComponent />
    </Suspense>
  );
}

In the code above, we have FooDefault.js that exports Foo as a default export.

Then, we imported it in App.js with React.lazy.

Conclusion

Code-splitting is easy with Create React App and React. React has the lazy method to import components on the fly.

We need a fallback UI so that we can see something when the dynamically imported component loads.

Error boundaries are also supported and we can use it to gracefully fail when a dynamically imported component fails to load.

Code-splitting is also supported by React Router. React.lazy is smart enough to split code by route.

React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

To build single-page apps, we have to have some way to map URLs to the React component to display.

In this article, we’ll look at how to create sidebars with route content only displaying in a portion of the screen with React Router.

Creating Sidebar

We can easily create a fixed sidebar on one side of the screen while displaying route content on the other.

To do this, we just need to add our sidebar on one side with links and the Switch and Route components on the other.

For example, we can write the following code to achieve this effect:

import React from "react";  
import ReactDOM from "react-dom";  
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

const routes = [  
  {  
    path: "/",  
    exact: true,  
    sidebar: () => <div>home</div>,  
    main: () => <h2>Home</h2>  
  },  
  {  
    path: "/foo",  
    sidebar: () => <div>foo</div>,  
    main: () => <h2>Bubblegum</h2>  
  },  
  {  
    path: "/shoelbaraces",  
    sidebar: () => <div>bar</div>,  
    main: () => <h2>Shoelaces</h2>  
  }  
];

function App() {  
  return (  
    <Router>  
      <div style={{ display: "flex" }}>  
        <div  
          style={{  
            padding: "10px",  
            width: "40%",  
            background: "pink"  
          }}  
        >  
          <ul style={{ listStyleType: "none", padding: 0 }}>  
            <li>  
              <Link to="/">Home</Link>  
            </li>  
            <li>  
              <Link to="/foo">Foo</Link>  
            </li>  
            <li>  
              <Link to="/bar">Bar</Link>  
            </li>  
          </ul> <Switch>  
            {routes.map((route, index) => (  
              <Route  
                key={index}  
                path={route.path}  
                exact={route.exact}  
                children={<route.sidebar />}  
              />  
            ))}  
          </Switch>  
        </div> <div style={{ flex: 1, padding: "10px" }}>  
          <Switch>  
            {routes.map((route, index) => (  
              <Route  
                key={index}  
                path={route.path}  
                exact={route.exact}  
                children={<route.main />}  
              />  
            ))}  
          </Switch>  
        </div>  
      </div>  
    </Router>  
  );  
}

const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);

In the code above, we have the sidebar in the top of App . And we have the routes array as follows:

const routes = [  
  {  
    path: "/",  
    exact: true,  
    sidebar: () => <div>home</div>,  
    main: () => <h2>Home</h2>  
  },  
  {  
    path: "/foo",  
    sidebar: () => <div>foo</div>,  
    main: () => <h2>Bubblegum</h2>  
  },  
  {  
    path: "/shoelbaraces",  
    sidebar: () => <div>bar</div>,  
    main: () => <h2>Shoelaces</h2>  
  }  
];

In the outermost div of App , we have display: 'flex' style to display the sidebar and the route content side by side, with the sidebar of the left and the route content on the right.

The sidebar is composed of the following code in App :

<div style={{ padding: "10px", width: "40%", background: "#f0f0f0" }}>  
    <ul style={{ listStyleType: "none", padding: 0 }}>  
        <li>  
            <Link to="/">Home</Link>  
        </li>  
        <li>  
            <Link to="/foo">Foo</Link>  
        </li>  
        <li>  
            <Link to="/bar">Bar</Link>  
        </li>  
    </ul>  
    <Switch>  
        {routes.map((route, index) => (  
        <Route key={index} path={route.path} exact={route.exact} children={<route.sidebar />} /> ))}  
    </Switch>  
</div>

In the code above, we have the ul element to display the Link s, which we can click on the show the route that we want.

In the Switch component, we have the routes array mapped to Route s that we want to display in the sidebar.

We want to display the component we set as the value of the sidebar in each entry of routes . Therefore, we set children to that.

In the routes array, we have the route with path set to '/' has the exact property set to true .

We have to do this so that React Router won’t direct all routes that start with a / to the ‘home’ route. This is because React Router doesn’t look at the other routes once it found a match.

If the match isn’t exact, then it’ll take anything that starts with a / as the correct match. In this case, it’ll be the first route.

The right side is composed of the following code:

<div style={{ flex: 1, padding: "10px" }}>  
    <Switch>  
        {routes.map((route, index) => (  
        <Route key={index} path={route.path} exact={route.exact} children={<route.main />} /> ))}  
    </Switch>  
</div>

The code above maps the routes array again to Route s, but we set the children prop to the components set to the main property instead of sidebar .

Conclusion

We can create a sidebar easily by using flexbox and the Switch and Route components.

As long as we have Switch and Route components in only one portion of the screen, the route content will only be displayed on that part of the screen.

Flexbox lets us display items side by side without hassle.