Reaching the router tutorial

Quick start to use Reach Router in React applications

In the previous project, I usedReach the routerI think this is the easiest way to route in React applications.

I think it's much easier than thisReaction router, This is another router I used in the past.

This is a 5 minute tutorial to understand its basics.

installation

First, install using

npm install @reach/router

in case@The syntax is new to you, it is an npm feature that allows scoped packages. In other words, a namespace.

Next, import it into your project.

import { Router } from '@reach/router'

Basic usage

I use it in the top level React file,index.jsin aCreate reaction appInstall and pack all the components to be displayed:

ReactDOM.render(
  <Router>
    <Form path="/" />
    <PrivateArea path="/private-area" />
  </Router>,
  document.getElementById('root')
)

ThispathThe properties I added to the components allow me to set paths for them.

In other words, when I type the path in the browser URL bar, "Reach to the router" will show me that particular component.

This/path is the index route, which is displayed when you have not set the URL/path next to the application domain. In other words, it is the "homepage".

Default route

When a user visits a URL that does not match any route, by default, "reach router" will redirect them to/route. You can add adefaultRouting handles this situation and displays a nice "404" message:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
  <NotFound default />
</Router>

Programmatically change the route

usenavigateFunction to programmatically change the route in your app:

import { navigate } from '@reach/router'
navigate('/private-area')

useLinkComponent to link to your route using JSX:

import { Link } from '@reach/router'
<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>

URL parameters

Add parameters using:paramsyntax:

<Router>
  <User path="users/:userId" />
</Router>

Now, in this hypothetical user component, we canuserIdAs a prop:

const User = ({ userId }) => (
  <p>User {userId}</p>
)

Nested routes

I showed you how to define routes in this way in the 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/private-area/23232The link points to the user component and passesuserId 23232.

You can also choose to allow the component to define its own route in it. You use/*Wildcard after routing:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area/*" />
</Router>

Then, you can import Router again inside the component and define its own sub-route set:

//component PrivateArea
<Router>
  <User path="/:userId" />
</router>

Any route use/private-area/somethingWill be processed by the User component, and the part after the route will be sent as its componentuserIdpillar.

To show something/private-areaNow you need to add another/Handler inPrivateAreaingredient:

//component PrivateArea
<Router>
  <User path="/:userId" />
  <PrivateAreaDashboard path="/" />
</router>

Download mine for freeResponse Handbook


More response tutorials: