Questions tagged [reach-router]

Reach Router is a simple routing library for React designed to have a small footprint. Not to be confused with [react-router] for early versions, though the two libraries have merged as of Reach Router V2.

Introduction

Reach Router is a routing library for React that borrows ideas from React Router, Ember, and Preact Router. Reach Router is designed to be simple and lightweight and therefore only supports simple routing patterns.

As a routing library, Reach Router handles updating the URL on the page and conditional rendering of a React application based on the URL.

Note that Reach Router and React Router are merging as of versions 2 and 6, respectively. The two libraries are the same on these versions and later.

Example

import React from "react";
import { Router, Link } from "@reach/router"

function App() {
    <Router>
        <Home path="/"/>
        <Profile path="profile"/>
    </Router>
}

function Home() {
    return (
        <main>
            <h1>Home</h1>

            <div>
                <Link to="/">Home Page</Link>
                <Link to="profile">Your Profile</Link>
            </div>
        </main>
    )
}

function Profile() {
    return (
        <main>
            <h1>Profile</h1>
        </main>
    )
}

Links


Related Tags

165 questions
20
votes
7 answers

Stop Reach Router scrolling down the page after navigating to new page

When I navigate to a new page, Reach Router scrolls down to the page content past the header (if the content is long enough). I'm assuming this is for accessibility but it's not necessary for my app and it's actually quite jarring. Can this…
Evanss
  • 23,390
  • 94
  • 282
  • 505
15
votes
2 answers

How to get parameters on Reach Router

I've a little problem with reach router, using react hooks. I need capture the params of the route in the browser I tried with props of the native documentation in the web of reach router but that is not giving me the param, the route is this:…
David Acevedo
  • 173
  • 1
  • 6
13
votes
5 answers

How do I go to previous page in gatsby (history.goBack)

I am working on gatsby. I need to go back to privious page/link as I used to do with reactjs. this.props.history.goBack}> How can I do…
Profer
  • 553
  • 8
  • 40
  • 81
10
votes
5 answers

Reach router navigate updates URL but not component

I'm trying to get Reach Router to navigate programmatically from one of my components. The URL is updated as expected however the route is not rendered and if I look at the React developer tools I can see the original component is listed as being…
Tom
  • 2,734
  • 2
  • 22
  • 39
9
votes
2 answers

How to redirect from the index page to a route which is generated programmatically, in a Gatsby.JS project

I want to reroute the index / to /blog in a gatsby project. The page at /blog route is generated inside gatsby-node.js file. What I tried is importing Redirect from @reach-router and inside the Index component returning Redirect to='/blog' but this…
Daksh
  • 1,064
  • 11
  • 22
8
votes
1 answer

Error instaling @reach/router with react v17

I'm working with React and I tried to use @reach/router, but when I try to install for the console, I had this error: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving:…
7
votes
0 answers

Gatsby Link has delay on click

I'm working with Gatsby.js Everything was pretty nice since I've started building the menu. When I clicked the Link component I've waited for about 2 seconds and then I was redirected to the next page. The weird thing is that the URL is changing…
7
votes
4 answers

Multiple path names for a same component in Reach Router

I am using the same component for three different routes: Is there anyway to combine it, to be like:
Ali Seyfollahi
  • 2,662
  • 2
  • 21
  • 29
6
votes
0 answers

Gatsby's internal router has issues with special characters

I am experiencing an issue where I have a page with a matchPath set to /*. This works for content that doesn't have special characters in the URL, such as my terms page. However, for my test page with special characters in the URL, it briefly loads…
5
votes
2 answers

Gatsby client routes go to 404 in develoment environment

I am working on a gatsby hybrid app that has several client-only routes with dynamic server data. Strangely when navigating to one of the client-only routes at I am getting the 404 page and the message that there is no page found. Visiting the…
5
votes
3 answers

Navigating to a 404 Route with Reach Router

I have the following routing config: ... This catches any routes that are not handled, and renders the
Undistraction
  • 42,754
  • 56
  • 195
  • 331
5
votes
0 answers

Cancel navigation in Reach router

I have a component which requires confirmation before navigating to another component. There is a Prompt component in react router which enables to ask confirmation before navigating to another component but I can't find any similar solution in…
Asim Dahal
  • 147
  • 2
  • 11
5
votes
3 answers

@reach/router: how to get the current route / page?

How does one get the current route for reach router. In react router one would get that through the params? The docs don't currently show an example how to do this.
chrisjlee
  • 21,691
  • 27
  • 82
  • 112
5
votes
1 answer

Can't get transitions to work in Gatsby using graphQL and createPages

I did a git clone of gatsby-wordpress-starter (https://www.gatsbyjs.org/starters/?c=Wordpress) Without making any changes I added pose: (https://popmotion.io/pose/examples/route-transitions-reach-router/) Following the instructions at the above url…
4
votes
1 answer

Gatsby dynamic routing breaks upon gh-pages deploy

I deployed my first Gatsby project to github pages: repo: https://github.com/michal-kurz/stfuandclick gh-pages: https://michal-kurz.github.io/stfuandclick/app/ (generated from gh-pages branch) It has one page, src/pages/app.tsx, which uses use Reach…
1
2 3
10 11