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.
Related
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}
/>
I encountered a problem with React Router v4 Switch component. I'm quite surprised that i couldn't find a relevant thread for this problem. A common Switch will look like this:
<Switch>
<Route path='/path1' component={Path1Component}/>
<Route path='/path2' component={Path2Component}/>
<Route exact path='/' component={Home}/>
<Route component={NotFound}/>
</Switch>
This means that when i'm on a path: '/' i get a Home component, on '/path1' i get a Path1Component and on path '/foobar' i get a NotFound component. And that is perfectly fine
However when i'm on '/path1/foobar' route i also get the Path1Component. This behaviour is not correct in every case - this time i do not want any nested routes for '/path1' route. '/path1/foobar' should get a NotFound component, any string, with '/' or without after '/path1' should return NotFound component.
What would be the preferred resolution to this problem? I could just add exact to every path, but wouldn't that be overbloating the code? I feel like that should be the default, but it's not the case.
Even on React Router v4 docs, like here. I see this problem - here '/will-match/foo' will also match. What are your thoughts?
There is a discussion here, but to make it short : it would break existing code. If this were to change, you'd have to do exact={false} if you want to match child routes without doing 'path1/child1'.
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>
I am creating one app using reactJS. I am defining routing by react-router.
sample code is below:
<Router history={browserHistory()}>
<Route path="/" component={App}>
<Route path="taco/:name" component={Taco} />
</Route>
</Router>
but I want to use something like this:
<Route path="taco?yourchoice/:name" component={Taco} />
but I am not able to do that.
Any help would be appreciated.
Thanks
path="taco?yourchoice/:name is not a valid path. Because you include the forward slash between yourchoice and :name, I am not positive if you are trying to place a path segment after the query or capture the yourchoice query parameter value.
In the case of the former, you cannot place a path segment after the search segment of a URL and you will need to reorder the path. For the latter, React Router does not take into account the search string when it is matching the current location to route paths. However, the location will be parsed and the query parameters will be available on the location object (which is injected as a prop into the <Route>'s component.
So, given the route:
<Route path="taco" component={Taco} />
When the user navigates to the URL:
example.com/taco?yourchoice=fish
The Taco component will be rendered and one of its props will be location.
class Taco extends React.Component {
render() {
const { query } = this.props.location
return <div>A {query.yourchoice} taco</div>
}
}
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.)