We have already learned how third-party components fit with Reagent. In this chapter, we'll implement React Router in the Tinycanva app.
However, React Router is far more popular than any CLJS solution, and it plays well with React, perhaps better than most CLJS routers. One of the reasons for this is that React Router encapsulates routing into React components, making it easy to reason for.
So - we're going to use React Router for the Tinycanva application. We will assume that you are familiar with its concepts - if not, we suggest that you watch this JS tutorial on React Router by Dev Ed.
We need to be able to register and log in. We also need a list view that lists all the graphics a user has created. Then we'll want a route to edit a graphic by id, and finally a catch-all 404. These are the routes we therefore need to account for:
/ (index page with links to log in and register)
/graphics (list view)
There are multiple ways to structure a React app with React Router. Some developers define all the routes in the same place, while some let routes grow organically.
We don't have any opinion on what approach you should take, but for this course, we'll define the top-level routes in
app.core and the children routes in the respective parent component - ie the
/graphics/:id route will be defined in the component rendered by
If this doesn't make sense, don't worry. We'll walk through each part in detail.
Installing React Router#
We need the package
react-router-dom to get the React Router for the browser:
Once installed, the modules exposed by
react-router-dom can be required in CLJS code using Shadow's
The above statement is equivalent to:
Cleaning the core namespace#
core namespace is the entry point of our single page application (SPA). We'll make the Router the root component of the application. But before that, we need to delete some code that we added in the last chapter. You should only have the
ns definition, the
main function, and the
render function in the
app.core namespace. Everything else can be purged.
app.core should be similar to what the
We also removed
app.hello from the render function and from the
Require React Router components#
We need three components for our initial setup:
Route. This can be achieved by adding the following vector to