I have a book item and I want to assign two routes for it. Is it possible with react? For example, when I click the item from the homepage route should be 'books/:id'. If I checked the book from a specific category page the route should be 'books/categoryName/:id'. Thank you in advance.
Yes, a Route's path property accept either string or string[]. See the docs
Related
I'm making a dropdown in a navbar using semantic-ui-react as you can see
inside drowpdown there are 3 dropdown items (suppose "Apples", "Mangoes" and "Bananas"). On clicking any one, the content below navbar changes , suppose if I clicked apples then Apples description will be shown below navbar. But the problem is that when I'm in "Apples" route(docs/Apple) and then I'm clicking Mangoes (from dropdown inside "Apples" route) then route is adding up like /docs/docs/Mangoes instead of docs/Mangoes.
What should I do?
Sorry if the question is common, I'm new to React.
Thanks in Advance
I think ,you must used "exact"
Match from exactly; equivalent to Route.exact.
exact When true, the active class/style will only be applied if the location is matched exactly.
In my app, I have a hierarchy of categories. Each category has a slug defined in the category entity. What I am trying to achieve is hierarchical structure of the url as well to match the hierarchy of categories.
The resulting page is the landing page of last category in the url.
The app is written with React (with React router).
So, for example I have categories:
category-1
category-2
The url to category 2 should be:
/category-1/category-2
At this point I am digging for a solution and I can really find any best practices to achieve that.
The only thing that I found is recursive paths https://reacttraining.com/react-router/web/example/recursive-paths
This works from a routes perspective, but in this example, the component is actually rendered many times. How do I render it only for the last slug?
Or, am I even in the right direction here? What is the alternative?
Since routes are regular React components, they may be rendered anywhere in the app, including in child elements.
example may help you .
I am trying to implement the React Router in such a way that it supports a route like this:
/myPages/:pageName1/:pageName2/:pageName3/...
The idea is that, even though the page being rendered is only the last page, the pages are nested, and the depth is not something that is pre-determined. The component that renders the actual page needs to know the names of parent pages.
To clarify, the idea is that the page data in the backend are in a tree structure in such a way that, in the above example, page1 is the root page, page 2 is a child of page1, page 3 is a child of page2, etc. In addition, one page can have multiple children. The last child name (so pageName3 in the example) is what is being used to query the database and get all the content required to render the full page. The parent names are required to render navigation-related subcomponent. I should also mention that just having /myPages/:pageName3 and getting all parent names from the backend is not really an option. I could fetch that information from the backend, but the URL presented to the user still needs to have that structure.
I am hoping that there's a way to get this type of information as an array, but I am having a hard time finding an example like this on the web.
maybe this can help.
https://github.com/ReactTraining/react-router/blob/d28d46dce08a5756a085f7e5eebb5169ea59e40b/packages/react-router/docs/api/Redirect.md#from-string
states:
A pathname to redirect from. Any valid URL path that path-to-regexp#^1.7.0 understands.
maybe you can combine
<Redirect from='/users/:id' to='/users/profile/:id'/>
with
var re = pathToRegexp('/:foo+', keys)
(taken from https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#one-or-more)
then you'll end up with
<Redirect from='/:pageName+/:id' to='/:id'/>
I am using admin-on-rest in my React app and wonder how is possible to make a custom page containing Show (or another detail component) with specified resource Id (for example: I want my app to fetch only resource with id = 1)
I don't know if this is canonical or the intended way to do things but you can supply both basePath and record as props to the ShowButton and EditButton components.
You can use this to redirect your user basically anywhere.
It should be possible (using some switch case or dependent input addon) to also add these props to the ListButton in the Show and Edit view and redirect your user back to the originating ListView.
Here is documentation to supply actions to the List view.
https://marmelab.com/admin-on-rest/List.html#actions
Using React with React-Router in a project and am wondering if it's possible to limit the possibilities for param names, like so:
www.mydomain.com/books/:id
and allowing 'Catcher in the Rye' and 'To Kill A Mockingbird' to be passed through, like so:
www.mydomain.com/books/catcher-in-the-rye
www.mydomain.com/books/to-kill-a-mocking-bird
I want to say that only a specific set of books can be used in place of :id (just so someone can't type in www.mydomain.com/books/whatever-they-want and have an empty React component render).
I do currently have a '*' route that catches anything not mentioned, but because params are dynamically generated based on whatever is passed, that won't help in this case.
Is this possible? Thanks.
You need to handle this logic in the component. Depending on if this is an already mounted component or not you will need to put the logic in the appropriate function (componentDidMount, componentWillReceiveProps)
if(!(this.props.params.id in myAcceptableParameters)){
redirect to a 404 here
}