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
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,879
  • 10
  • 43
  • 81
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
  • 610
  • 2
  • 13
  • 39
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…
Miloslavc
  • 127
  • 2
  • 7
3
votes
1 answer

@reach/router - path updates but component doesn't render when Link clicked

I started using @reach/router for a new project based on a recommendation on the react-router-dom github page. Unfortunately, what seems like a very simple use case is not working. I began by trying to use the @mui BottomNavigation component with…
lje
  • 413
  • 5
  • 16
3
votes
3 answers

URL not changing consistently in React router

I'm getting odd behavior using @reach/router. My aim is to have a page with tabs. When I click on a tab the url changes and the page changes (though it doesn't reload the whole page). I've been using chakra ui since it makes the theme making easier…
Katie Melosto
  • 1,047
  • 2
  • 14
  • 35
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
  • 561
  • 1
  • 9
  • 25
3
votes
1 answer

How do I refresh current page in Gatsby?

I have a menu with links to different pages, but when I click on the link to the page I'm already on, literally nothing happens. I want the page to rerender as if the user clicked in from another page. I've tried navigate('/temp') navigate(link, {…
Andy Pandy
  • 51
  • 1
  • 5
3
votes
1 answer

How to redirect all routes to gatsby index

I'm trying to make a Gatsby project that has only one page to handle all the routes. I have am index page like this: const App = () => { return
Felipe César
  • 1,234
  • 2
  • 16
  • 34
3
votes
1 answer

Reach router changes URL, does not update view

Using does change the URL in the browser, but the app does not change its display. Here is the the app: import React from 'react'; import { Router } from "@reach/router" import HeaderNavItems from…
jansensan
  • 633
  • 1
  • 8
  • 23
3
votes
4 answers

Testing navigate of reach router with react-testing library

An app that uses Reach Router. Has two pages, apage and bpage rendering APage and BPage Apage has a heading and button. When the button is clicked, app navigates to bpage. App.js import { Router, navigate } from "@reach/router"; export default…
Shorn Jacob
  • 1,183
  • 5
  • 22
  • 38
3
votes
1 answer

How do I use different layouts in Reach Router?

I have an app where I have N different layouts (eg. BeforeLogin, MainLayout, SomeElseLayout, etc.). Each layout is an HTML-markup component that should wrap a page-component, like Settings, Profile, etc. I need to be able to assign a specific layout…
SmxCde
  • 5,053
  • 7
  • 25
  • 45
3
votes
0 answers

Detect if route is initial page load with Reach Router?

I have 2 routes in my app: / and /about. If a user first visits / and then navigates to /about then no special behaviour is required. However they refresh the page when on /about, or if the initial visit is to /about then I need to detect this and…
Evanss
  • 23,390
  • 94
  • 282
  • 505
3
votes
1 answer

Gatsby hybrid app - Issues with sub routing on a page which is built using a template in `createPage`

EDIT: I forgot to mention that my site contains around 25k pages built from this template. The answer from Derek Nguyen will work for smaller sites with a small amount of pages, but when this is scaled up the matchPath data is stored in the JS,…
C Lindsay
  • 209
  • 1
  • 4
3
votes
1 answer

How to use multiple react suspense fallbacks with reach router?

I'm using "@reach/router": "^1.2.1" and in my App.js file I've got a fallback component to show while my routes are loading: }>
Simpleton
  • 6,285
  • 11
  • 53
  • 87
2
votes
1 answer

Gatsby navigate() with query parameters

I am at an odd stuck point. I am trying to navigate programatically using navigate() from gatsby (I tried @reach/router as well). But whenever I add query parameters to the url like so: const id = "001" const title =…
Max
  • 754
  • 8
  • 24
1
2
3
10 11