In the last project I did I used Reach Router and I think it’s the simplest way to have routing in a React app.
I think it’s much easier than React Router, which is another router I used in the past.
Here’s a 5 minutes tutorial to get the basics of it.
Installation
First, install it using
npm install @reach/router
If the
@
syntax is new to you, it’s an npm feature to allow a scoped package. A namespace, in other words.
Next, import it in your project.
import { Router } from '@reach/router'
Basic usage
I use it in the top-level React file, index.js
in a create-react-app installation, wrapping all components that I want to appear:
ReactDOM.render(
<Router>
<Form path="/" />
<PrivateArea path="/private-area" />
</Router>,
document.getElementById('root')
)
The path
attribute I add to the components allows me to set the path for them.
In other words, when I type that path in the browser URL bar, Reach Router shows that specific component to me.
The /
path is the index route, and shows up when you don’t set a URL / path beside the app domain. The “home page”, in other words.
The default route
When a user visits an URL that does not match any route, by default Reach Router redirects to the /
route. You can add a default
route to handle this case and display a nice “404” message instead:
<Router>
<Form path="/" />
<PrivateArea path="/private-area" />
<NotFound default />
</Router>
Programmatically change the route
Use the navigate
function to programmatically change the route in your app:
import { navigate } from '@reach/router'
navigate('/private-area')
Link to routes in JSX
Use the Link
component to link to your routes using JSX:
import { Link } from '@reach/router'
<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>
URL parameters
Add parameters using the :param
syntax:
<Router>
<User path="users/:userId" />
</Router>
Now in this hypothetical User component we can get the userId
as a prop:
const User = ({ userId }) => (
<p>User {userId}</p>
)
Nested routes
I showed you how routes can be defined in this way in your top level React file:
<Router>
<Form path="/" />
<PrivateArea path="/private-area" />
</Router>
You can define nested routes:
<Router>
<Form path="/" />
<PrivateArea path="/private-area">
<User path=":userId" />
</PrivateArea>
</Router>
So now you can have your /private-area/23232
link point to User component, passing the userId
23232
.
You can also choose to allow a component to define its own routes inside it. You use the /*
wildcard after the route:
<Router>
<Form path="/" />
<PrivateArea path="/private-area/*" />
</Router>
then inside the component you can import Router again, and define its own set of sub-routes:
//component PrivateArea
<Router>
<User path="/:userId" />
</router>
Any route using /private-area/something
will be handled by the User component, and the part after the route will be sent as its userId
prop.
To display something in the /private-area
route now you also need to add a /
handler in the PrivateArea
component:
//component PrivateArea
<Router>
<User path="/:userId" />
<PrivateAreaDashboard path="/" />
</router>
Download my free React Handbook
More react tutorials:
- A React simple app example: fetch GitHub users information via API
- Build a simple counter with React
- VS Code setup for React development
- How to pass props to a child component via React Router
- Create an app with Electron and React
- Tutorial: create a Spreadsheet using React
- The roadmap to learn React
- Learn how to use Redux
- Getting started with JSX
- Styled Components
- Introduction to Redux Saga
- Introduction to React Router
- Introduction to React
- React Components
- The Virtual DOM
- React Events
- The React State
- React Props
- The React Fragment
- The React Context API
- React PropTypes
- React concepts: declarative
- React: How to show a different component on click
- How to loop inside React JSX
- Props vs State in React
- Should you use jQuery or React?
- How much JavaScript you need to know to use React?
- Introduction to Gatsby
- How to reference a DOM element in React
- Unidirectional Data Flow in React
- React Higher Order Components
- React Lifecycle Events
- React Concept: Immutability
- React Concept: Purity
- Introduction to React Hooks
- Introduction to create-react-app
- React Concept: Composition
- React: Presentational vs Container Components
- Code Splitting in React
- Server Side Rendering with React
- How to install React
- CSS in React
- Using SASS in React
- Handling Forms in React
- React StrictMode
- React Portals
- React Render Props
- Testing React components
- How to pass a parameter to event handlers in React
- How to handle errors in React
- How to return multiple elements in JSX
- Conditional rendering in React
- React, how to transfer props to child components
- How to get the value of an input element in React
- How to use the useState React hook
- How to use the useCallback React hook
- How to use the useEffect React hook
- How to use the useMemo React hook
- How to use the useRef React hook
- How to use the useContext React hook
- How to use the useReducer React hook
- How to connect your React app to a backend on the same origin
- The Reach Router Tutorial
- How to use the React Developer Tools
- How to learn React
- How to debug a React application
- How to render HTML in React
- How to fix the `dangerouslySetInnerHTML` did not match error in React
- How I fixed an issue with a React login form state and Browser autofill
- How to configure HTTPS in a React app on localhost
- How to fix the "cannot update a component while rendering a different component" error in React
- Can I use React hooks inside a conditional?
- Using useState with an object: how to update
- How to move around blocks of code with React and Tailwind