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 in react won't re-render with urlParams on the same path

I'm creating a single page application on an internal UI. A menu appears on the left of the screen (CollectionsInventory), which contains Links generated from an API call, and on the right, the resulting object (a Collection) is shown in his…
Alexis Lessard
  • 553
  • 6
  • 7
0
votes
1 answer

How to pass data in react among different files or routes?

I'm new to react and after a beginners course of learning react. i decided to take a personal project of creating a monthly subscription app that'll help me keep track of all my subscriptions. However, i'm stuck at a point where i need to pass the…
0
votes
2 answers

unit test not using url path with parameter when using reach router with react-testing-library

I am trying to create a unit test for a react component where the props to the component checks part of the url path to decide a course of action and at the end of the path takes in a parameter or value. Using the example given in…
Andy5
  • 2,319
  • 11
  • 45
  • 91
0
votes
1 answer

Handling subdomain routing in Gatsby application

I have a Gatsby application with below structure: src |-pages |- dashboard.js |- projects.js Once deployed on Netlify, these pages (obviously) are accessible via below URLs: https://domain.netlify.app/dashboard…
0
votes
1 answer

ReachRouter navigate in component constructor

If a user goes to a page that requires a context beyond what's on the url, I'd like to redirect them elsewhere. The use case is: /todos/list - this page shows the user their list of todos. It contains links to: /todos/edit?id=1 - this page…
andersonbd1
  • 5,266
  • 14
  • 44
  • 62
0
votes
1 answer

Why is the entire page rerendered with reach router?

Only the login component should be rendered if the path is /login. It does work but now if the path is updated through Tabs component from /posts/1 to /posts/2 the entire page is re-rendered. I actually want the login component to be displayed…
Thomas Müller
  • 420
  • 4
  • 15
0
votes
1 answer

Gatsby: page not rendering when I pass parameters in URL [Help]?

Im stuck at this thing. I want to get url parameter (/mypage/?title=my-title) from url and display it in the page. Currently I tried client-only routes in gatsby import path from "path" exports.onCreatePage = ({ page, actions }) => { const {…
0
votes
1 answer

Infinite Loop in Reach Router

I'm a bit new to React and it is my first time using reach-router (or any kind of router really). What I'm trying to do is have a nested component inside one of my router links. Basically, within my ItemShop component, I want to have two more links…
FlackoNeil
  • 23
  • 1
  • 6
0
votes
2 answers

Issues with Reach router Nested routes

i am having trouble with reach router nested routes, I am trying to navigate to / and render page2, but I am stuck on "/" homepage the same page when the route changes to // import React from "react"; import "./App.css"; import Homepage…
MOin
  • 31
  • 1
  • 1
  • 8
0
votes
2 answers

best approach to set bottomNavigation status from the current Active Link according to the entered path (Reach Router - Material UI)

I am using react-router and material-ui. I have a BottomNavigation and BottomNavigationAction (MaterialUI) (with Link component from Reach Roouter ). import { Link } from "@reach/router" const useStyles = makeStyles((theme) =>…
Matinger
  • 1
  • 2
0
votes
1 answer

Reach router - load component with URL

I have a simple router which is possible via the @reach/router module When someone enter the full URL ending in "/resume" I would like the resume component to show up and I thought…
iJK
  • 4,655
  • 12
  • 63
  • 95
0
votes
2 answers

The Use of "Navigate(-1)" Fails to Return to Previous Location in Gatsby

I am trying to create a simple "Back" button in Gatsby that returns the the previous page and retains the scroll position. This already happens when using the browser back button, but I'm struggling to produce a custom one. I've read in the Reach…
Tasha Zuniga
  • 33
  • 1
  • 2
  • 5
0
votes
0 answers

Gatsby client side pages flicker and not rendering

First timer here, hope you can help as I couldn't find a solution on Google. I am trying to set up client side only pages on Gatsby. I have created the "App.js" component and set up the routes copying the code snippet from the Gatsby docs. import…
Paolo_T
  • 29
  • 4
0
votes
1 answer

How I can set search params when using @reach/router

How I can set search params when using @reach/router? I just used props.history.push but props.history still undefined. Here is my code when page state chage const handleChangePage = page => { setPage(page) const query = new…
0
votes
1 answer

Error while using Link in reach-router. But routing is working fine when I use anchor tag

This my App.js import React from "react"; import ReactDOM from "react-dom"; import { Router, Link } from "@reach/router"; import Add from "./components/Add"; import Home from "./components/Home"; import Navbar from "./components/Navbar"; import…