Build a Secure SPA with React Routing

When building an SPA (single page application) with React, routing is one of the fundamental processes a developer must handle. React routing is the process of building routes, determining the content at the route, and securing it under authentication and authorization. There are many tools available to manage and secure your routes in React. The most commonly used one is react-router. However, many developers are not in a situation where they can use the react-router library. Because of this, they may need to use Reach Router, Wouter, or maybe even no router at all.


This is a companion discussion topic for the original entry at https://developer.okta.com/blog/2021/11/01/react-routing

I tried to get this example working, but it would not build. First issue -Can’t resolve ‘react-router-dom’… Installed that, but the follow up error is “Attempted import error: ‘useRouteMatch’ is not exported from ‘react-router-dom’.” Is the example outdated already?

This tutorial uses wouter, not react-router-dom.

npm i wouter@2.7.5

You can also checkout its completed example:

Thanks for the reply. I should have been clear, I was using the completed example from gitlab. Cloning that repo, building and running was giving the error messages from my previous post. I was questioning why it would require react-router-dom. Regardless, the information in the post is helpful.
Thanks

You said “gitlab”. Did you mean to say github? Are you using the same repo I pointed to above? I just tried cloning it and following the instructions in its README and it worked fine for me.

sorry, meant github.