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
0 answers

Issues on Page Transition using Reach-Router, React-Transition-Group and GSAP?

I'm having issues on page transition animation using Reach-Router Not React-Router, GSAP, and React-Transition-Group in combination. I did research and found example on page-transition animation using Reach-Router and…
sirrus
  • 341
  • 1
  • 7
  • 16
0
votes
1 answer

Delay load on every page with reach-router

I am trying to achieve page loading (actually fake page loading) with established time out up to 1500s (my control). using reach/router library, just like Jack's website example here https://jacekjeznach.com (click on every page to see the loading).…
sirrus
  • 341
  • 1
  • 7
  • 16
0
votes
1 answer

Split up routes in same router with reach-router

Say I have a lot of routes and I would like to split them up in groups. How would I accomplish this in React with Reach Router? Example of what I'm basically trying to accomplish: const Router = () => { return (
Nick Muller
  • 2,003
  • 1
  • 16
  • 43
0
votes
0 answers

Reach Router props.navigate

I am trying to use Reach Router to navigate to a result url after a form submit. Using props.navigate takes be to the desired url, but no component is rendered (I am trying to render after the query. To add to the complexity, I would like…
isaacsultan
  • 3,784
  • 3
  • 16
  • 29
0
votes
1 answer

How to expose context data to specific routes

I'm using react hooks with context API for sharing data between multiple components and using reach router for routing. My code looks something like this: function App() { return (
Abhishek
  • 346
  • 6
  • 17
0
votes
2 answers

How to conditionally render a component when I am at my index route with Reach-Router (or my top level route)?

I want a list to be hidden from the user if the url is not '/'. This list renders at the top level and consists of many links. Whenever I navigate back to '/' (index route) I want to show the list again. How can I use reach router most effectively…
m_b_cool
  • 1
  • 3
0
votes
4 answers

How do I only render one result in a separate component using axios in React?

Edit// I suppose my question isn’t so clear. I’m trying to get one park returned when my url points to http://localhost:1233/details/‘${parkcode}’. I’ve defined the param for the url in my results.js file. But I’m having trouble in defining the…
0
votes
1 answer

How to make highchart points redirect to another component with value in React?

In highcharts, by clicking on the data points, I need to redirect to another page by passing the points values in react. I'm using reach/router. Is there any by which we can make a point like a react/router Link. plotOptions :{ …
Krn
  • 21
  • 4
0
votes
0 answers

How to deploy React app on a server subdirectory with reach-router?

I'm trying to deploy this React app in a subdirectory on a hosted server online and I'm using react-router. I got this to work with react-router by simply changing the homepage in package.json and adding a "basename" parameter in the Router…
AGrush
  • 1,107
  • 13
  • 32
0
votes
3 answers

Why auth0's parseHash return undefined?

I was new to auth0, when I tried to experiment with auth0's parseHash. It surprised me that somehow this function returns null. I tried to take a peep inside the source code, it seems this function attempts to return something eventually. Here's the…
Jiahua Zhang
  • 511
  • 7
  • 19
0
votes
2 answers

Update component with data from parent in React

In my react app I have this child component that inherits data from its parent. However, it does not update the page with new data from the child component when a relevant anchor link is clicked. Here's my build -…
0
votes
0 answers

Querying an API and redirecting to a results page for a Search bar (component) on a React app

So I'm having this difficulty trying to build my Search component to query data from my API request via Axios. Right now it just populates an alert box. It should do a few things, compare the data from the query with the data from the API, pass…
-1
votes
1 answer

Gatsby build time error - WebpackError: TypeError: isRedirect is not a function

Ever since I tried protected routes with this on login.js and this on edit.js useEffect(() => { // ... some code here getEscritos(); if (!user &&…
Jovane Rocha
  • 101
  • 10
-1
votes
2 answers

Update Redux State based on Reach Router Component

I want to update the state of my application when a router component is rendered. For example, if I go home "/" I will render homepage, but I want to trigger a state change so that other components like my footer and header are aware we are on the…
Saad Khan
  • 49
  • 4
-1
votes
1 answer

Gatsby SPA deployed on netlify applies wrong emotion css on first load (distilled example)

I managed to distil my problem into the following code. It works fine with local dev server, but breaks when deployed to Netlify. The source repo can be found here (branch destilled-netlify-problem) The branch is deployed here I have a primitive…
Michal Kurz
  • 1,592
  • 13
  • 41
1 2 3
10
11