Next Generation Routing for React
Documentation
You can also find the docs in the website directory.
Community
Legal
MIT License Copyright (c) 2018-present, Ryan Florence
Next Generation Routing for React
You can also find the docs in the website directory.
MIT License Copyright (c) 2018-present, Ryan Florence
My root node has css like this:
display: flex;
flex-direction: column;
height: 100vh;
When Router
renders a div
, it breaks my layout:
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>
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:
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 docsREPO 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:
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!
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.
questionIn 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.
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
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.
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.
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>
);
}
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?
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!
Bumps qs from 6.5.2 to 6.5.3.
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 withstrictNullHandling
and a customfilter
/serializeDate
(#279)- [Fix]
utils
:merge
: fix crash whensource
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 globalundefined
(#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)
overx.toString()
- [Tests] remove nonexistent tape option
- [Dev Deps] backport from main
298bfa5
v6.5.3ed0f5dc
[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 URLs12ac1c4
[meta] fix README.md (#399)0338716
[actions] backport actions from main5639c20
Clean up license text so it’s properly detected as BSD-3-Clause51b8a0b
add FUNDING.yml45f6759
[Fix] fix for an impossible situation: when the formatter is called with a no...f814a7f
[Dev Deps] backport from mainDependabot 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
.
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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bumps express from 4.16.3 to 4.18.2.
Sourced from express's releases.
4.18.2
- Fix regression routing a large stack in a single route
- deps: [email protected]
- deps: [email protected]
- perf: remove unnecessary object clone
- deps: [email protected]
4.18.1
- Fix hanging on large stack of sync routes
4.18.0
- Add "root" option to
res.download
- Allow
options
withoutfilename
inres.download
- Deprecate string and non-integer arguments to
res.status
- Fix behavior of
null
/undefined
asmaxAge
inres.cookie
- Fix handling very large stacks of sync middleware
- Ignore
Object.prototype
values in settings throughapp.set
/app.get
- Invoke
default
with same arguments as types inres.format
- Support proper 205 responses using
res.send
- Use
http-errors
forres.format
error- deps: [email protected]
- Fix error message for json parse whitespace in
strict
- Fix internal error when inflated body exceeds limit
- Prevent loss of async hooks context
- Prevent hanging when request already read
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- Add
priority
option- Fix
expires
option to reject invalid dates- deps: [email protected]
- Replace internal
eval
usage withFunction
constructor- Use instance methods on
process
to check for listeners- deps: [email protected]
- Remove set content headers that break response
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- Prevent loss of async hooks context
- deps: [email protected]
- deps: [email protected]
- Fix emitted 416 error missing headers property
- Limit the headers removed for 304 response
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
... (truncated)
Sourced from express's changelog.
4.18.2 / 2022-10-08
- Fix regression routing a large stack in a single route
- deps: [email protected]
- deps: [email protected]
- perf: remove unnecessary object clone
- deps: [email protected]
4.18.1 / 2022-04-29
- Fix hanging on large stack of sync routes
4.18.0 / 2022-04-25
- Add "root" option to
res.download
- Allow
options
withoutfilename
inres.download
- Deprecate string and non-integer arguments to
res.status
- Fix behavior of
null
/undefined
asmaxAge
inres.cookie
- Fix handling very large stacks of sync middleware
- Ignore
Object.prototype
values in settings throughapp.set
/app.get
- Invoke
default
with same arguments as types inres.format
- Support proper 205 responses using
res.send
- Use
http-errors
forres.format
error- deps: [email protected]
- Fix error message for json parse whitespace in
strict
- Fix internal error when inflated body exceeds limit
- Prevent loss of async hooks context
- Prevent hanging when request already read
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- Add
priority
option- Fix
expires
option to reject invalid dates- deps: [email protected]
- Replace internal
eval
usage withFunction
constructor- Use instance methods on
process
to check for listeners- deps: [email protected]
- Remove set content headers that break response
- deps: [email protected]
- deps: [email protected]
- deps: [email protected]
- Prevent loss of async hooks context
- deps: [email protected]
- deps: [email protected]
... (truncated)
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]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
.
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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bumps decode-uri-component from 0.2.0 to 0.2.2.
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
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
.
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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bumps decode-uri-component from 0.2.0 to 0.2.2.
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
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
.
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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.