Related tags

React router
Overview
Comments
  • Provide a way to disable rendering `div` for `Router`

    Provide a way to disable rendering `div` for `Router`

    Feature Request?

    My root node has css like this:

    display: flex;
flex-direction: column;
height: 100vh;

    When Router renders a div, it breaks my layout:

    image

    I found there's no way to disable it in the code https://github.com/reach/router/blob/master/src/index.js#L336.

    It would be great if I can pass false or null value to component prop of Router like this to disable rendering the div:

    <Router component={null}>
 ...
</Router>
    opened by chenxsan 49
  • Passing state option in navigate doesn't seem to work

    Passing state option in navigate doesn't seem to work

    When state option is provided to navigate, it is not available in the props.location.state object for the matched components.

    Example sandbox: https://codesandbox.io/s/l27754822m

    Steps to reproduce:

    • Click on 'Invoices' link.
    • Add some ID in the input field.
    • Click on 'create' button.
    • Watch console which is logging props.location.state for Invoice and Invoices components.

    I have taken the example from documentation and updated the Invoices component to have state option { invoiceID: provided_id } for the navigate function. props.location.state seems to only have key and no other information for the matched Invoice and Invoices components.

    Is it a bug or am I not using the option correctly? 😕

    needs docs 
    opened by websymphony 40
  • Reach Router and TypeScript: Property 'path' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<SignupPage> & Readonly<{ children?: ReactNode; }> ...

    Reach Router and TypeScript: Property 'path' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> ...

    REPO OWNER MESSAGE

    This doc should help: https://github.com/reach/router/blob/master/website/src/markdown/pages/typescript.md

    Original issue

    Hi!

    I'm getting this error when using Reach Router with TypeScript:

    screen shot 2018-08-27 at 21 28 31

    I know that this is a TypeScript-specific issue and not necessarily a bug but I'm probably not the only having this problem and getting some documentation for a workaround would be great. :)

    You can solve it by specifying the types of the props of whatever page component you're using and adding a path: string; to them. That does not seem like a good idea though because you won't be actually using that prop and that will cause other errors with linters and the like.

    I'm sure there are other solution but at this time I don't really know of any as I'm not a TypeScript expert. All I know that this error is due to path not being a typed prop of the page you're using.

    I made a minimal test case in CodeSandbox that can reproduce it: https://codesandbox.io/s/pmkw4wr9oj (you will have to download it and open index.tsx in VS Code to see it)

    I appreciate any help on this issue! Thanks!

    opened by maximilianschmitt 35
  • navigate isn't working as intended with LocationProvider

    navigate isn't working as intended with LocationProvider

    I am trying to navigate my react application after a form submit. The url gets updated but the linked component doesn't render and application stays on the same page. I'm using LocationProvider inside the router, when I remove that it works fine but I need LocationProvider since I have to build an Electron app.

    This is the relavant code snippet:

    import { Router, createMemorySource, createHistory, LocationProvider } from '@reach/router';
let source = createMemorySource(window);
let history = createHistory(window);
<Provider store={STORE}>
    <Main>
      <LocationProvider history={history}>
        <Router>
            <Home path="/" />
            <MainLayout path="dashboard/*" />
            <Login path="login" />
      </Router>
    </LocationProvider>
  </Main>
</Provider>

    Url gets updated to /dashboard/something but MainLayout doesn't get rendered.

    question 
    opened by aliahsan07 31
  • Support Hash History?

    Support Hash History?

    In React router you can do something like this:

    import createHashHistory from 'history/createHashHistory'
<Router history={history}>
 <Routes />
</Router>

    Is this supported?

    This is very useful in environment like Electron where you can't use the "normal" HTML5 history API.

    I didn't found anything in the docs except from this: https://reach.tech/router/api/createHistory but it doesn't seems related to what i'm looking for.

    opened by oferitz 31
  • redirectTo not redirect and throw error

    redirectTo not redirect and throw error

    in App i try redirect to login page anon user

    componentDidMount() {
    const { isAuthenticated } = this.props;
    if (!isAuthenticated) redirectTo('/login');
  }

    in console i have

     Uncaught RedirectRequest {uri: "/login"}
The above error occurred in the <App> component:
    in App (created by Connect(App))
    in Connect(App)
    in MuiThemeProvider
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

    How to use redirect right and fix this

    opened by popuguytheparrot 29
  • Link/navigate does not obey Router basepath

    Link/navigate does not obey Router basepath

    With basepath set to /reach-router-basepath-demo: https://github.com/Pyrolistical/reach-router-basepath-demo/blob/master/src/index.js#L29

    Dashboard link is fine, Home link breaks.

    Try it for yourself: https://pyrolistical.github.io/reach-router-basepath-demo/

    The Home link is <Link to="/"> and changes the history to be https://pyrolistical.github.io/ when it should have set it to https://pyrolistical.github.io/reach-router-basepath-demo/

    Full source: https://github.com/Pyrolistical/reach-router-basepath-demo I couldn't demo this in codesandbox since I need the app to be deployed on a basepath.

    opened by Pyrolistical 25
  • Add typescript types

    Add typescript types

    Fixes https://github.com/reach/router/issues/11

    As I mentioned in another issue, one thing I'm not sure about is how to handle the path property on route components. Here's a usage example of what I came up with:

    import { RouteComponentMatchingProps, Router } from "@reach/router"
import React from "react"
import { render } from "react-dom"

let Home = () => <div>Home</div>
let Dash = () => <div>Dash</div>

const HomeRoute = Home as React.SFC<RouteComponentMatchingProps>
const DashRoute = Dash as React.SFC<RouteComponentMatchingProps>

render(
  <Router>
    <HomeRoute path="/" />
    <DashRoute path="dashboard" />
  </Router>,
  document.getElementById("app-root"),
)

    Someone also suggested module augmentation as an alternative, though that would mean allowing the path property to appear on any component in the entire app, however it would certainly look cleaner in usage.

    Comments on how to best handle this (and on other general corrections) are welcome.

    opened by itsMapleLeaf 21
  • allows for a cleaner way of handling authenticated routes

    allows for a cleaner way of handling authenticated routes

    Allows for syntax like this

    const Routes = () => {
  const { user } = useAuth()
  const handlePrivateRoute = navigate => {
    if (!user) navigate('/login')
  }
  return (
    <Router onPrivateRoute={handlePrivateRoute}>
      <SettingsPage path="/settings" private />
      <LoginPage path="/login" default />
    </Router>
  );
}
    opened by alex-cory 15
  • Links to routes nested on the same page make the page jump to the content.

    Links to routes nested on the same page make the page jump to the content.

    I am making a page with tabs. Tab header uses Links, and the tab contents have different nested routes. On tab click the page jumps to the tab container. Expected behavior: page stands still in the same position it was before clicking. I was using react router previously and the page would stay still in the same setup. Example: https://codesandbox.io/s/y0jmjj2o8j Or am I using it in a wrong way?

    opened by simoroshka 15
  • [Feature request] useMatch, useLocation hooks.

    [Feature request] useMatch, useLocation hooks.

    Hello, thank you for this wonderful library. Is it possible to haveuseMatch,useLocation hooks for us? Right now, the <Match /> and <Location /> are render props, it will be really nice to have hooks version to reduce wrappers. Thank you!

    enhancement 
    opened by rockmandash 13
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump express from 4.16.3 to 4.18.2 in /website

    Bump express from 4.16.3 to 4.18.2 in /website

    Bumps express from 4.16.3 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump decode-uri-component from 0.2.0 to 0.2.2 in /website

    Bump decode-uri-component from 0.2.0 to 0.2.2 in /website

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • gh- pages refreshing page causes to 404

    gh- pages refreshing page causes to 404

    Hi guys,

    I ran into a problem when I deployed my site using gh-pages.

    I would love to get help with that, I tried all the tricks I saw.

    do we have a solution for this problem?

    thank you!!!

    opened by ELDADBRHANO 5
Owner
Reach
The accessible foundation for React
Reach
GitHub https://reach.tech/router