React router path: making optional value inside path - javascript

Consider the following two react route paths:
/site/my/photos/:id
/site/photos/:id
I would like the 'my' inside first path to be optional.
How can I make it optional (probably something to do with ? symbol), and how can I then retrieve if the my is present or not in the URL?

You can pass an array of paths to the Route from react-router-dom, for example:
<Route path={["/site/my/photos/:id", "/site/photos/:id"]} component={MyComponent} />

i think you should define two routes with same component like below :
<Route path="/site/my/photos/:id" component={MyComponent} />
<Route path="/site/photos/:id" component={MyComponent} />

Related

having issues in understand path passed to react router

How does the two path differ . I tried going through the docs of react router but it still creates confusion .
First one is
<Route
path="/cricket/:description/:id"
component={xyz}
/>
and another is
<Route
exact
path="/cricket"
component={xyz1}
/>
I see that the first Route is mentioned in App.js .It leads to confusion as which one got executed and how ?
Router will render both componenets if path is something like /cricket/foo/123 because it matches both pattern.
If you want only one to render you have to use exact prop like
<Route exact path="/cricket"
component={xyz1}
/>

React router v4 match path if not `/user`

I have a case in react router v4:
<Route path="/:time?/:zone?" component={TimeComponent} />
However I don't want to render that TimeComponent if route is:
/user/userId123
As you can see above, the path matches user as :time and userId123 as :zone.
My goal: I don't want path to match if route contains /user.
I know I can use regex, but how to specify that I dont want to match the path if contains /user?
Looking for help
You can use switch from react router dom like this:
<Switch>
<Route path="/user/:userId?" component={UserComponent} />
<Route path="/:time?/:zone?" component={TimeComponent} />
</Switch>
With this it will match only one route at a time and you 2 param route is at the end. So using this approach you can catch /user route before time component route.
Please try this.

Link renders the first partial match in React Route v4

Using codes below, it only linked to ListComponent when i want to linked to DetailsComponent. If change
Details: route('data/tower/list/item'),
to
Details: route('data/tower/item'),
it can link to DetailsComponent.I don't why and how to fix it ?
const EnumRouter = {
...
List: route('data/tower/list'),
Details: route('data/tower/list/item'),
};
<Switch>
...
//ListComponent
<MainLayout path={EnumRouter.List} component={List} />
//DetailsComponent
<MainLayout path={EnumRouter.Details} component={Details} />
...
</Switch>
That happens because
You are making use of Switch Component, which renders the first route that matches, which is ofCourse correct thing to do.
You have your List Route as 'data/tower/list' and your Details Route as 'data/tower/list/item', however Router doesn't look for a complete match, In your case 'data/tower/list' matches(although not completely but with the initial part) the Details Route and hence even when you try to Route to Details, it routes to List component.
The solution is to make use of the exact attribute for the Route.
From the Documentation:
exact: bool
When true, will only match if the path matches the location.pathname exactly.
**path** **location.pathname** **exact** **matches?**
/one /one/two true no
/one /one/two false yes
Change the code to
<Switch>
...
//ListComponent
<MainLayout exact path={EnumRouter.List} component={List} />
//DetailsComponent
<MainLayout path={EnumRouter.Details} component={Details} />
...
</Switch>

Make splat optional in react-router route

So currently, I want to have a route where it could be any enumeration of ids (kind of like a file browser). It looks like this:
<Route path="/browser">
<IndexRoute component={FileBrowser} />
<Route path=":id">
<IndexRoute component={HardDriveBrowser} />
<Route path="folders/**/:folderId" component={FolderContents} />
</Route>
</Route>
However, if I visit a route such as /browser/1/folders/2, it does not match. I think it is expecting the splat.
Is there a way to specify the splat as optional, or have it default to an empty string?
In react-router v4, simply put ? at the end to make the parameter optional. In react-router v2, you use parenthesis to make a parameter optional. ex: (:folderId) would make that optional.

React Router Param

Is it possible to do this with react router?
<Route path="/:reset_password" component={ResetPassword} />
<Route path="/:create_password" component={CreatePassword}/>
I want use different param with different component. I test above code and it doesn't work. the code above work if I change to this:
<Route path="/something1/:reset_password" component={ResetPassword} />
<Route path="/something2/:create_password" component={CreatePassword}/>
thanks for the help
As #chris said, remove the colons and/or assign dedicated routes. React Router can't differentiate between the two routes you've supplied, as they're technically identical (root path + a dynamic parameter.)

Categories