Comments (18)
Hey all! I noticed a similar behavior while testing this package. I'm using create-react-app, I noticed whenever I update a file that contains a route loader and after fast-refresh is triggered, all the react-location links in the page would stop working (the URL would get updates, but the page content remains the same).
from location.
I’ll need you to replicate this in a code sandbox or online repl so I can debug it.
from location.
So I have been trying to reproduce the issue I was facing in my app. It turns out I misdiagnosed the problem. My peculiar issue is that when I update my app URL with the useNavigate hook, the query params in another component are no longer reactive. It used to work when I was using [email protected]
.
I created a sandbox here to try to reproduce the problem but so far it works as expected but it doesn't work in my app.
I have to dig deeper and please let me know if I need to update this issue title or content and feel free to close it. I'll create a new one if, eventually, it turns out that I can reproduce a problem.
from location.
So @tannerlinsley I think something is definitely amiss that I can't reproduce.
I replaced imports of [email protected]
with @tanstack/[email protected]
. When I do this the Link
component changes the address in the address bar but the page doesn't change. The same thing happens when I update the search with the useNavigate
hook.
I have been trudging through the documentation to see if the API changed in any significant way but I can't seem to find anything.
My setup looks like this
import {lazy, Suspense} from 'react';
import {Router, Route, ReactLocation, Outlet, MakeGenerics} from 'react-location';
import {parseSearch, stringifySearch} from 'react-location-jsurl';
type LocationGenerics = MakeGenerics<{
Search: {...};
}>;
export const AppRoutes = (): JSX.Element => {
const routes: Route<LocationGenerics>[] = [
{
path: '',
element: <LazyLoadedComponent1 />,
},
{
path: 'path2',
element: <LazyLoadedComponent2 />,
},
{path: '*', element: <Error404 />},
];
const reactLocation = new ReactLocation<LocationGenerics>({
parseSearch,
stringifySearch,
});
return (
<Suspense fallback={<div>Suspended</div>}>
<Router location={reactLocation} routes={routes}>
<Outlet />
</Router>
</Suspense>
);
};
from location.
Are any of your router components perhaps using React.memo or using useMemo to memoize returned JSX?
from location.
I can't find anywhere I memoized returned JSX in my code.
from location.
I'm running into a similar issue where I'm getting Uncaught TypeError: Cannot read properties of undefined (reading 'search')
.
From what I can tell, navigate
calls the .parseLocation
method, which passes location.search
to .parseSearch
. (react-location/src/index.tsx#L462)
new ReactLocation()
creates an instance of location under location.current
, and it looks like the correct location.current
value is passed to .parseSearch
but I still receive an error.
I'll keep digging and see if I can find anything else. Thanks for this great library! It looks many of my problems with client-side routing so I hope I can get this to work!
from location.
I'm having the same issue, but with a twist. It works with one search param, but not with a combination. For ex
my-site/jobs?view=table
would work, but my-site/jobs?view=table&page=1
would not trigger an update
from location.
Very strange. As per usual, a CodeSandBox that exhibits the issue will help me fix this 100x faster and easier
from location.
I have the same behavior, sometimes ! Sometimes it works just as expected, I close the browser, restart, and it doesn't work anymore. Sometimes in the opposite direction, broken => works.
from location.
I seem to have similar behavior where all types of navigation sometimes don't work. I think its due to route caching since it seems to only happen when other routes change or I edit a data loader. I'll try to reproduce it in a sandbox.
from location.
所以@tannerlinsley我认为肯定有一些我无法重现的问题。
我
[email protected]
用@tanstack/[email protected]
. 当我这样做时,Link
组件会更改地址栏中的地址,但页面不会更改。当我用useNavigate
钩子更新搜索时,也会发生同样的事情。我一直在翻阅文档以查看 API 是否有任何重大变化,但我似乎找不到任何东西。
我的设置看起来像这样
import {lazy, Suspense} from 'react'; import {Router, Route, ReactLocation, Outlet, MakeGenerics} from 'react-location'; import {parseSearch, stringifySearch} from 'react-location-jsurl'; type LocationGenerics = MakeGenerics<{ Search: {...}; }>; export const AppRoutes = (): JSX.Element => { const routes: Route<LocationGenerics>[] = [ { path: '', element: <LazyLoadedComponent1 />, }, { path: 'path2', element: <LazyLoadedComponent2 />, }, {path: '*', element: <Error404 />}, ]; const reactLocation = new ReactLocation<LocationGenerics>({ parseSearch, stringifySearch, }); return ( <Suspense fallback={<div>Suspended</div>}> <Router location={reactLocation} routes={routes}> <Outlet /> </Router> </Suspense> ); };
I had this problem too, tried combining
from location.
I seem to have similar behavior where all types of navigation sometimes don't work. I think its due to route caching since it seems to only happen when other routes change or I edit a data loader. I'll try to reproduce it in a sandbox.
Try my method, please give me a reply if you can, thank you
from location.
@tannerlinsley I've played around with my own app a bit and noticed it's not necessarily caching that causes the router to break, but code changes. Any time the source code changes the router breaks. It's a bit much to put in a sandbox, so here's a working commit. Run npm run dev-install
in /create-octobox-app, then run npm run dev
in /app and mess around with any of the files in /app/src/windows. The config is generated from those files. Run npm run dev-uninstall
in /create-octobox-app when you're done.
from location.
I am having a similar issue
"react": "16.13.1",
"react-dom": "16.13.1",
"@tanstack/react-location": "^3.7.4",
const rlRoutes = [
{
path: 'one',
element: (
<div>
page 1 <Link to="/two">go to page 2</Link>
</div>
)
},
{
path: 'two',
element: (
<div>
page 2 <Link to="/one">go to page 1</Link>
</div>
)
}]
If I type the url in as /one , it works fine, now if i click "go to page 2" , the URL in the browser is updated to /two as expected, but the page still says "page 1"
from location.
i just figured out it was not working because I had a useQuery in the same component that i had my <Router .../>
from location.
All should be fixed in the new "Router".
from location.
Are any of your router components perhaps using React.memo or using useMemo to memoize returned JSX?
@tannerlinsley Still facing rendering issue when route changes using useNavigate hook, returned component makes use of memo
export const AccountDetails: FC<AccountDetailsProps> = memo<AccountDetailsProps>(
({ userData, authConfig, allowSca }: AccountDetailsProps) => { ... });
logout navigation
await navigate({
to: '/login/#/login?logout='
});
from location.
Related Issues (20)
- console.log in RouterProvider.tsx HOT 1
- useSearch bug: renders 'undefined' in between re-renders HOT 3
- Link and useParams typing Issues HOT 4
- Router state status doesn't change on latest version HOT 2
- Suspense error: A component suspended while responding to synchronous input HOT 6
- loaderDeps is not called with validated search params HOT 1
- FullSearchSchema incorrect if routes have conflicting search schemas
- Load called twice on page reload? HOT 8
- Static paths are not preferred if they are alongside a dynamic path HOT 3
- navigate forgets path param
- CLI crash HOT 2
- Can't navigate with Memory History Router HOT 2
- RouteApi routeId issues HOT 5
- Wrong href when throwing redirect in React Strict Mode HOT 4
- Source code for route file getting modified by the CLI HOT 7
- Params flash undefined on specific route progression HOT 2
- Nested layouts: Suggestions <Link to="?" /> returns the wrong "to" string HOT 3
- Cursor "pointer" flashes to default style after navigation HOT 2
- Typescript error, some route paths are reported as invalid HOT 1
- Typescript on Link component "to" prop go wrong when have nested layout folder for File base route
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from location.