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

152 questions
18
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
  • 17,152
  • 66
  • 217
  • 397
11
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
  • 115
  • 1
  • 6
9
votes
4 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
  • 1,914
  • 1
  • 18
  • 30
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,047
  • 1
  • 16
  • 27
7
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
  • 866
  • 9
  • 22
6
votes
4 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
  • 1,463
  • 3
  • 21
  • 53
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
4 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
  • 38,727
  • 46
  • 165
  • 296
4
votes
1 answer

Node.js react serves incorrect asset url

I have been experiencing node issues for resolving my path for my Create React App. Issue: Assets (chunk.js) files are resolving to relative path rather than absolute path. When I visit the website from root folder (example.com) and hit the…
TechnoCorner
  • 4,151
  • 8
  • 27
  • 62
4
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…
4
votes
0 answers

Jest/Enzyme test if page redirects on button click

I am writing unit tests with Jest and Enzyme. I have a button on a 404 page which should redirect a user to the websites homepage. I want to write a test to make sure this button is redirecting a user to the homepage regardless of the URL. In…
tdammon
  • 412
  • 3
  • 18
4
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
  • 18,399
  • 22
  • 72
  • 104
4
votes
2 answers

React hook useState not updating with onSubmit

I'm currently experiencing an issue pushing the input field value to state onSubmit. codesandbox I'm trying to set an input field value to the state so that I can use that value once the component is updated to redirect the user to another page. I…
3
votes
1 answer

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…
3
votes
1 answer

Framer Motion exit animation not firing with Reach Router

I've created a basic Gatsby App, which is utilising Client-Only Routes with Reach Router. I've updated my gatsby-browser.js to reflect the following: export const wrapPageElement = ({ element }) => {
HireLee
  • 489
  • 1
  • 9
  • 22
1
2 3
10 11