In React Router 6, how can a path be partially matched (relative to its hierarchy) without knowing the complete hierarchy? For example, if a navigation element is in the middle of the hierarchy, how can it match just the relative part of the path?
e.g. with the following routes:
/users
/users/1
/users/1/edit
Assuming there was a visual user picker which returned (just) the user's id - how could the current id be determined via the route alone?
Here is a code sandbox illustrating the same issue using MUI's Tabs component. The idea would be for the active tab to show as active (as in this demo)
Related
I am trying to get the entire name of a dbId. I am able to get the name using getNodeName() but is there a way to fetch the id as well? I have highlighted the id I need in the image below.
Property panel snapshot:
Since everything you see in the viewer is open source and available through JavaScript, including the property panel that you show in the screen snapshot, the highlighted Revit element id can definitely be accessed. In the worst case, you would simply grab the caption of the property panel window and parse it from that. However, the Revit element id is also accessible from the viewer node properties. It can be extracted from the externalId property, which includes a hex encoding of it. For more details, please refer to the similar previous question on missing Revit ID in instance elements.
I posted yesterday similar question, but today I discovered how to use data from one page at another page inside the same application. I extended Page 2 from Page 1 and now I can use all its properties (of Page 1). The problem is that when some property value has changed inside Page 1 (new value) I still get the old value in page 2. How can I reflect the change at Page 1 to the Page 2?
For two way data binding from parent to child element and vv.; use attribute-name = "{{property}}" (not [[property]]) and declare proterty at child as notify:true to reflect property upway data binding.
I'm working on a personal project, it's a simple blog app using ReactJS. I have 1 screen for the entry list page, and 1 for the entry details page.
Now, I'm trying to follow the best practices, so I laid out my components as this:
Entry List Container: container component. Handles fetching entries retrieval and updating application state by dispatching redux actions.
Entry List: presentational component. Receives an Array of Entry objects and shows a list of them
Entry Details Container: container component. Handles more application state update logic, fetching, etc. Receives an Entry object
Entry Details: presentational component. Displays the entry.
Basically both containers renders their presentational counterpart.
Now, the problem is the navigation. In my App component I'm rendering a couple of Route components, one is rendering the EntryListContainer, and another one should render the EntryDetailContainer.
Problem is, how do I navigate from EntryList ?
My hierarchy is something like this:
EntryListContainer
EntryList
EntryRow -----> This contains a button to navigate.
EntryDetailsContainer
EntryPage
I suppose I could render a Link inside EntryRow, something like
<Link to={`${match.url}/{entry.id}`} />
But then I'd have to pass down the match object down from EntryListContainer to EntryList to `EntryRow, and it feels smelly.
How do I navigate properly?
The way I currently implemented navigation in my Polymer 1 application is this:
I use paper-menu and paper-submenu
on iron-select, I will create a route based on the names of the paper-item
for example groups, example, test will be concatinated into a route like: /groups/example/test. User when then be routed there using this.set('route.path', '/groups/example/test')
Also, on page load, to highlight the correct menu items, I parse the URL and selected the correct menu items. So far so good.
The problem here is: suppose I have even further nesting like /groups/example/test/subpage1/subsubpage2. When the user navigates to such a URL, he is forced back to /groups/example/test because the parsing of URL to select the correct items.
The workaround I have currently is: instead of attaching on-iron-select I will setTimeout then attach this handler. This is so that the user does not get forced back to the wrong page, but this feels wrong. Whats the correct way of doing this?
I have a new product page with the url /product/0. When product is saved using a button, I want to show 'Saved Successfully' message and change url to /product/1024 without actually navigating to that page as this would cause GET requests for the product and other data on the page.
I tried the Navigation mixin, however both, the transitionTo and replaceWith actually cause componentWillReceiveProps and I can't figure out a way how to distinguish my case (when all data on the page is already relevant) from navigation between different products, when data has to be reloaded.
So basically I am looking for a way to just change the url with React Router.
In a SPA there's no navigating to another page, the history change could lead to a different route being rendered, but as per your example, the same route will be rendered, so the only thing that did happen is a state change of the props of the Route component.
So you need to check this state with the previous state in componentWillReceiveProps and see if you need to refetch the data.