React App Routing with Wouter — Redirect, Default Route, and Base Path

Wouter is a library that lets us loading React components according to URLs.

In this article, we’ll look at how to add routing to a React app with Wouter.

Redirect

We can redirect to another route component with the setLocation function.

For instance, we can write:

import React from "react";
import { Route, Router, useLocation } from "wouter";

const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};
export default function App() {
  const [, setLocation] = useLocation();

  return (
    <div>
      <a href="#" onClick={() => setLocation("/about")}>
        About
      </a>
      <Router>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name">
          {(params) => <div>Hello, {params.name}!</div>}
        </Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

We call the useLocation hook to return the setLocation function.

Then we call that in the onClick handler to go to the /about route.

Matching Dynamic Segments

We can use the useRoute hook to match dynamic route segments.

For instance, we write:

import React from "react";
import { Link, Route, Router, useRoute } from "wouter";

const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};

const UserPage = () => {
  const [, params] = useRoute("/users/:name");
  return <div>Hello, {params.name}!</div>;
};

export default function App() {
  return (
    <div>
      <Router>
        <Link href="/users/foo">Users</Link>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name" component={UserPage}></Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

In the UserPage , we call the useroute hook with the route pattern to get the name parameter from the params oject.

In the Route ‘s path prop, we have the :name placeholder to add the placeholder.

We can also match the /foo?/:bar* pattern to add the wildcard bar placeholder.

/foo/baz? has the optional baz placeholder.

And /foo/bar+ with bar being one or more segments is also supported for matching.

Base Path

We can add a base path with the Router component’s base prop.

For instance, we write:

import React from "react";
import { Link, Route, Router, useRoute } from "wouter";

const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};

const UserPage = () => {
  const [, params] = useRoute("/users/:name");
  return <div>Hello, {params.name}!</div>;
};

export default function App() {
  return (
    <div>
      <Router base="/app">
        <Link href="/users/foo">Users</Link>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name" component={UserPage}></Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

to set the base path to /app .

Default Route

We can add a default route by adding the Route component without adding the path prop.

For instance, we write:

import React from "react";
import { Route, Switch } from "wouter";

export default function App() {
  return (
    <div>
      <Switch>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route>Not Found</Route>
      </Switch>
    </div>
  );
}

to add the Not Found route.

The default route should always come last so the other patterns can be checked before showing the not found route.

Conclusion

We can add redirects, match dynamic route segments, set the base path, and add a default route with Wouter into our React app.