react-navigation / react-navigation/react-navigation
Linking: Params are not parsed correctly when a screen appears in multiple configs
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
I have this config:
const config = {
screens: {
Tabs: {
screens: {
Sortiment: {
path: "sortiment",
screens: {
Category: {
path: "k/:category?",
exact: true
}
}
},
Home: {
path: "home",
screens: {
Category: "category"
}
}
}
}
}
};
And I'm trying to parse this path:
const path = "k/categoryParam?x=x";
The state object that is returned when I call getStateFromPath(path, state) looks like this:
{
"routes": [
{
"name": "Tabs",
"state": {
"routes": [
{
"name": "Sortiment",
"state": {
"routes": [
{
"name": "Category",
"path": "k/categoryParam?x=x",
"params": {
"x": "x"
}
}
]
}
}
]
}
}
]
}
Notice how categoryParam is not included in the routes params. If you remove the second path config inside the "Home" config, the params are parsed correctly.
I tracked the problem down to this line:
https://github.com/react-navigation/react-navigation/blob/838842e85fffd56a3a64a1f4e969318998217c7a/packages/core/src/getStateFromPath.tsx#L287
In this case there are two configs that can be found here, and the wrong one is used to construct the params.
Expected behavior
params should include the category param and look like this:
{
"category": "categoryParam",
"x": "x"
}
Reproduction
https://codesandbox.io/s/npm-playground-forked-pnv716?file=/src/index.js
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| node | v16.13.2 |
| yarn | 1.22.15 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/core/src/getStateFromPath.tsx at the line linked in the issue, where multiple matching configs are found and one is used to construct params. Use the provided config and path as the reproduction, then verify that the resulting Category route includes both category and x params.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100