Comments (14)
That's strange. /
paths are forced to be exact all the time, and each Match should carry down its base via context.
from router.
- Here the basepath is updated for matches: https://github.com/tannerlinsley/react-location/blob/master/src/index.js#L246
- Then it's passed down via context: https://github.com/tannerlinsley/react-location/blob/master/src/index.js#L294
- MatchFirst should pick that up here: https://github.com/tannerlinsley/react-location/blob/master/src/index.js#L191
- And matched from here down: https://github.com/tannerlinsley/react-location/blob/master/src/index.js#L213
from router.
The thing is that it's kinda solved when you render the component like this
<LocationProvider>
<nav>
<Link to="/">Home</Link>
<Link to="dashboard">Dashboard</Link>
<Link to="invoices">Invoices</Link>
</nav>
<div>
<MatchFirst>
<Match path="/">
{console.log('AAA')}
<div>This is Home</div>
</Match>
<Match path="dashboard">
<div>This is the Dashboard</div>
</Match>
<Match path="invoices">
<MatchFirst>
<Match path="new">
<Link to="..">Back</Link>
<div>This is a new invoice!</div>
</Match>
<Match path=":invoiceID">
{({ params }) => (
<div>
<Link to="..">Back</Link>
This is invoice #{params.invoiceID}
</div>
)}
</Match>
<Match path="/">
{({ params }) => {
console.log('BBB')
return(<div>
This is invoice /
</div>)
}}
</Match>
</MatchFirst>
</Match>
</MatchFirst>
</div>
</LocationProvider>
That way it only console.log 'BBB' or 'AAA' accodingly the route.
from router.
Can you make a codesandbox that replicates this behavior for me? I'm having a hard time replicating it on my end.
from router.
Hi Tanner, here the example https://codesandbox.io/s/53jjln4654
You see that both console log executes, even when i enter to inovice. Only 1 console should execute.
Regards!
from router.
Nice. This is more clear. Thanks for the info. I'm still trying to figure out how or why this happens. Would be up to helping me investigate?
from router.
I feel like its some of this logic here: https://github.com/tannerlinsley/react-location/blob/master/src/index.js#L213-L220
from router.
Tanner, first of all I want to tell you that Diego and I are friends and we are talking about this topic since he discovered it.
My theory is that the child is rendered first, therefore the javascript code is executed, and then when rendering the parent, that child is hidden because it does not match the path, but the javascript has already been executed. On the other hand, when the child is a callback, this does not happen because the render trigger of the child occurs by the parent itself.
In conclusion, the routing works well, but the javascript of each Match child is executed regardless of whether match or no match
from router.
from router.
So, you're trying to say that the console.log should not be executed unless it meets the condition of match? I'm not sure how the interpreter works, but I get the feeling that it's running before the rendering.
<Match path="/">
{console.log("AAA")}
<div>This is Home</div>
</Match>
<Match path="invoices">
<MatchFirst>
<Match path="/">
{console.log("BBB")}
<div>Invoices</div>
</Match>
</MatchFirst>
</Match>
</MatchFirst>
When replacing the child by callback the problem disappears, which makes me think that it is not a match problem.
<Match path="/">
{() => {
console.log("AAA")
return <div>This is Home</div>
}}
</Match>
<Match path="invoices">
<MatchFirst>
<Match path="/">
{()=>{
console.log("BBB")
return <div>Invoices</div>
}}
</Match>
</MatchFirst>
</Match>
</MatchFirst>
from router.
I think you're right as well. I was merely pointing out that it's not designed to render the content unless it matches. That definitely narrows the bug type we're looking for.
from router.
Yes, I did not mean to render, that word came out but I wanted to refer to the assembly of the component regardless of whether it is rendered or not. What I'm not 100% sure, is that the execution of those console.log is correct, it would be ideal not.
I hope you can find the explanation of what happens :)
from router.
Great Job Tanner, this version seems to work perfect! Also the basepath works well.
Thanks!
from router.
Thanks!
from router.
Related Issues (20)
- preload="intent" triggers navigations in route's beforeLoad handler HOT 5
- feat: make the typed `useNavigate` hook be accessible via the returns of `createFileRoute` and `createLazyFileRoute`
- Typescript errors from using "navigate" HOT 6
- Double quote character is not encoded as described in the doc HOT 1
- SearchParams ending in "=" strips the equals sign HOT 3
- In memory router: history back and go functions not working HOT 2
- Invalid loader type of `void` when loader function has `promise.then(data => data.x)` HOT 2
- In Memory routers useMatchRoute does not behave as expected
- useSearch returns old value temporarily if loader is defined HOT 1
- router-vite-plugin 1.26.3 broken on Windows: "?" is not valid in a filename HOT 5
- bug(router-vite-plugin): `experimental.enableCodeSplitting` nextCreate is not a function HOT 4
- `Route.id` is `undefined` immediately after route creation HOT 5
- lazy-loaded Devtools button disappears after navigating HOT 1
- Uncaught TypeError: Cannot read properties of null (reading '__store') HOT 6
- notFound(), route loader, and initial application loading. HOT 5
- `location.pathname` is not encoded on client side navigation
- refactor(router-vite-plugin): migrate the `experimental.enableCodeSplitting` functions to not use absolute paths HOT 2
- When using hash history router reads and writes search params from fragment instead of query HOT 2
- "route.tsx" is not working as expected on the root route. HOT 3
- Can't move to lazy parent route from ErrorComponent HOT 3
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 router.