I have a page route /movies?categoryId=21213
on this page, I have a section of actors, on the click it's should redirect to /movies?categoryId=21213/actor?actorId=234324234
how should I describe correctly to render my latest component with an actor?
I tried
<Route path=`/movies/:categoryId?/:actorId?`/>
but that's not working
There are two ways to approach this. Either go with query params or path params.
Path params
You route:
<Route path='/movies/:categoryId/:actorId' />
Here you will have route that has two path params /movies/1/2.
Query params
Your route
<Route path='/movies' />
So your route is only /movies but you pass query params to it and handle them in your component.
Example of a route with query params /movies?categoryId=1&actorId=2.
You can use useHistory hook for that purpose in your routed component.
Personally i preferred to use query params because they are easier to handle in your component, but you can pick your way from these two examples.
In your question, code is a bit wrong, because path params dont need ? to be present in a route.
Related
So I am developing an app in react and have react router lib to show different possible URLs in my app. I have the following routes, defining which component will be rendered, depending on the URL:
<Route path={`/products/:address/:page`} component={Products} />
<Route path={`/products/:productId`} component={ProductDetails} />
<Route render={() => <NotFound/>}/>
The 1st one expects something like this: /products/store/1 to match the products and show the products page.
The 2nd one expects something like this: /products/5e996d123e1e0816242aed80 and shows the product details.
The 3rd one is a fallback UI, if nothing matches
My problem is, that if I am in the 1st URL and delete the page (1), eg /products/store/, react router gets confused and tries to match the 2nd route.
In both components, I load the params incomponentDidMount like this:
this.props.match.params.address, this.props.match.params.page for the 1st component and this.props.match.params.address for the 2nd.
Ideally, I would like to render the 3rd route, if the 2nd argument of the 1st route is not present.
One possible solution would be to change the 2nd Route from /products/:productId to /product/:productId, so it won't get confused.
Is there any better solution for this?
I am transition a route from another application that is defined as /locations/(.*).
The other application supports URLs such as /locations/country=usa&size=large, rather than your typical query string format of /locations?country=usa&size=large. I'd like to mimic that.
I know that react-router routes are parsed by path-to-regexp, which seems to support arbitrary regex in the routes, but my component does not render with the following defined route:
<Route path="/locations/(.*)" component={Locations} />
What's the correct way to support arbitrary text after a route, rather than your traditional query string?
You can use a named query parameter in your route, parsing the query parameter in the locations component and displaying content relevant to the query params.
For example...
<Route path="/locations/:locationPath" component={Locations} />
and then in the Locations component
constructor(props) {
super(props);
const locationPath = props.match.params.locationPath;
// conditionally do something based on locationPath
}
You can do this in the constructor, or componentWillMount, componentDidMount or any variation therein. I do mine in the constructor as this is the earliest access to the props object and state.
If you're more certain of the possibility in the query string you can use
<Route path="/locations/country=:country,state=:state" component={Locations} />
and you will receive country and state as separate keys in the match.params object.
Finally, if you don't want to require each param you can use the following
<Route path="/locations(/?country:country)(/?state=:state)" component={Locations} />
and you will get this route whether state or country is specified alone, or together.
React Router v4 Route
I'm having an issue with react router and its routing path.
I have a couple of links, say
localhost:3000/a
localhost:3000/b
localhost:3000/c
and my route is set up as so:
<Route exact path="/:cat" component={Post} />
My issue is that whenever I go to one of the three URLs, i.e. 1 -> 3, it will only load page 1, as all of them meet the criteria (i.e. path="/:cat"). Am I correct to assume that it won't render each path as they are referred to as ONE route, hence it doesn't need to be rendered as the "state" hasn't changed?
Its one route and any matching path (/a or /b) will render that Post component.
<Route exact path="/:cat" component={Post} />
This route will allow you to render Post component for each url, that starts from / and this component will have the actual url inside this.props.routeParams.cat.
You can use this prop in your Post component to call the appropriate child component. i.e Check if this.props.routeParams.cat = a , then call <ComponentA />.
Sorry, my english is not good enough.
Version
4.1.1
I want to match two url with one route and one component.
just like below:
http://host:port/test/orders/id-1
http://host:port/test/products/id-1
How can I write the path for Route?
Thanks.
You can make use of url path parameters to specify multiple paths matching the same route.
In your case the Route will look like
<Route path = "/test/:param/id-1" component={MyComponent}/>
In case you only want to match the /orders/ids-1 and /products/id-1, then you can make use of regex in the path param. react-router makes use of a path that path-to-regexp understands,
The relevant documentation of it is there with the react-router documentation
So you can use
<Route path = "/test/(orders|products)/id-1" component={MyComponent}/>
<Route path="/:user" component={Home}>
<Route path="/:thing(/:version)" component={Thing}/>
</Route>
So, I've got two dynamic objects in my application that I'd like to be controlled by route params in react-router. Using the code above, both /0 and /0/3 take me to Home. I need /0/3 to take me to Thing. I'm not sure what I'm doing wrong here... Does react-router even support multiple dynamic params next to each other like this? I couldn't find anything in the docs.
What happens here is that you've given React Router two paths that can both match on /anything. By default then React Router matches the first one it can find.
To dig deeper, if I go to /pudding, React Router can't know if you meant /:user or /:thing. Since /:user occurs first, that option will be chosen.
You also need to make sure if nesting routes is what you want. Currently, your Thing route is nested below Home, which means that it is rendered via this.props.children in your Home component. So, for your current Thing route, Home will always be rendered too, with Thing as a child. If your Home component doesn't render this.props.children, Thing will not be shown.
I suspect you just want two different pages. What you could do to achieve that is the following:
<Router history={history}>
<Route path="/user/:user" component={Home} />
<Route path="/:thing(/:version)" component={Thing}/>
</Router>
This will make every /user/name go to the Home component, and every other /random (with an optional extra level) will go to Thing. If you wonder why in this case React Router doesn't take /user/name to the Thing route, it's because it still matches in the order your routes are specified. Because your Home route matches the requested URL, no siblings of this route are tested anymore.