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
0
votes
1 answer

Reach router refresh page

Setup: I have a form that send data to an action creator, which in turn submits to an API and gets the result. What I want is when the form submits successfully, to refresh the form with blank inputs. This is how the component looks like import…
0
votes
0 answers

React layout component to render specific routes in react router

I am using Gatsby with @reach/router, I have this simple router <>
MMJ
  • 279
  • 7
  • 23
0
votes
1 answer

Routing doesn't seem to work in React based Addins

I have created a brand new Excel addin using the Yeoman generator and I have selected the React Task pane option. I am trying to build an extension that will have multiple pages for different features of the addin so I installed reach router and…
CodingAnxiety
  • 206
  • 2
  • 13
0
votes
1 answer

Why does @reach/router route paths automatically to page directory name?

I am currently using Gatsby and @reach/router I would like to link my about page to '/profile' my router looks like: Why is my…
Matt Park
  • 151
  • 5
0
votes
2 answers

Reach-Routers navigate() with an offset for anchor links?

Is there a way to do navigate('/#about') with reach-router, but with an offset of, say, -16px? I haven't been able to find anything on that.
R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
0
votes
0 answers

How would I go about listening to a route change in reach router?

I have a component I'm trying to build pagination functionality for 1 2 so when I click the link it should change the path…
Red Baron
  • 7,181
  • 10
  • 39
  • 86
0
votes
2 answers

Reach Router: Redirect to urI on function click

I'm currently struggling with how to redirect to the homepage when a user clicks a button that will sign them up for an account: My Current set-up is like this function Application() { const user = useContext(UserContext); return ( …
0
votes
0 answers

Error while creating custom pages in Gatsby

I'm facing issues when i try to create custom pages in Gatsby. I have deleted every files in pages folder other than app.js file. Now, i check for page path '/app' in onCreatePage function in gatsby-node.js. If it's found, i change the path from…
Deepak S.M
  • 51
  • 1
  • 9
0
votes
1 answer

How to detect if another component is present in the document?

I have a site built with React Static that has a Header component that is always present. Depending on if the current page has a hero component or not, the Header should be either light or dark. The Header is rendered outside of the routes and the…
0
votes
1 answer

Gatsby server-side rendering of page with client-only routes, based on window location

I am working on a Gatsby project (a language learning blog) and am having trouble with an issue that only happens in production builds due to server-side rendering. I programmatically generate a page for each blog post with the following…
0
votes
2 answers

How to use reach router with React Context API?

I use reach router like this below before and it works fine ..... .... I decided to refactor my code with context, and the code is refactored to something like…
Chloe Sun
  • 111
  • 1
  • 6
0
votes
1 answer

Testing reach router with react-testing library

Going through using react testing library with reach-router https://testing-library.com/docs/example-reach-router function renderWithRouter( ui, { route = '/', history = createHistory(createMemorySource(route)) } = {} ) Second argument to the…
Shorn Jacob
  • 1,183
  • 5
  • 22
  • 38
0
votes
1 answer

Rendering paths wrapped in an ErrorBoundary with @reach/router

To make this short, I am trying to render some routes wrapped in ErrorBoundaries inside the Router but it does not correctly match the path supplied. Here is a quick sandbox example that I set up to show what I am talking about. If you check out the…
Michael Nissen
  • 123
  • 1
  • 6
0
votes
1 answer

How to prevent Reach Router from disabling Scrolling in children component

Scrollbar and scrolling is disable in parent element (with "overflow-y" set to "scroll") inside the component in Router children , Why its behaving like this and how do i prevent it / make it work? live demo here:…
nymhays
  • 468
  • 3
  • 12
0
votes
2 answers

Call/Run Animation Every Time user Navigates to new Page

I have a Nav (functional) component that contains a simple animation using GSAP. It animates the first time the page loads. I would like it to animate every time user clicks on a different page (I'm using React Reach Router for page navigation) I…
Eric Nguyen
  • 926
  • 3
  • 15
  • 37
1 2 3
10
11