I have a material-ui drawer, when the user clicks a button to open the drawer I'd like the url to change without a navigation actually happening, if someone visits the url (such as url.com/drawer) they'll land on the page with the drawer already open (or at least in the process of opening).
I would probably put ?drawer=open as a query string parameter rather than have it be a dedicated route. When the button is clicked, navigate to the current route with ?drawer=open appended, either by having the button actually being a styled Link, or using history.push.
Related
I'm trying to implement a page transition animation that works as follows:
User clicks a link on the website
A block slides down from top to the bottom so the whole screen turns into the block's color
After a short delay, the block disappears by sliding down further
User sees a new page opened.
The libraries I use are:
React
React Router Dom
Transition Group
GSAP
You can find the current implementation here: https://codesandbox.io/s/frosty-brook-3dl6y5
The problem is that the animation gets triggered after the new page is opened (i.e. user clicks a link, sees a new page's content, and then the animation starts).
I've already tried many different things, including replacing onEnter with onExist in PageTransition component, however, nothing worked.
How can I update my code so the animation gets triggered before the new page loads?
Just in case, I'm ready to switch to any open source library that would allow me to achieve what I described above.
I have a component that is a navigation bar. The navigation bar persists within all screens in specific parts of my project, and is the highest level component at all given times.
Is it possible to somehow get a page-change event (so if I go from say, /main/viewer to /main/documents ) without having a callback triggering a pagechange going from navigation bar all the way down to the viewer component?
These components are nested in each other, as the NavBar displays main screen, which then directs to different component for different screens, which in turn have components that call different screens based on buttons pressed, etc etc.
I'm trying to get the simplest way to get a page-change event, so that I can trigger a function in viewer, which prompts to save any edits done, if page is about to be changed through the nav-bar (or another means) and not via a button in the viewer.
currently, I navigate between pages/components by using this.,props.history and then either .push("path", props) and .goBack() which is usually the last line on a function to handle exiting the component.
I am trying to implement conditional rendering for our navbar's items depending on what page we're on (i.e. If we are on the chatrooms page, or "/rooms", then we don't want the "Chatrooms" nav item to render in the navbar). What I attempted to do was convert the Navbar into a class component, create a state for the currentPage and set it to window.location.pathname, and then created methods for setting the state and what nav items to render depending on the state, but it always requires me to reload the page when going from one page to another for the conditional logic to fully take effect. Is there a better way of achieving this functionality?
You could use react-router load content without refreshing the page. It's really simple to learn and use and you could probably get it up and running within an hour. You can Add Route components for the main content of the page.
When you route to a different page you could also call a setState function and change the currentPage, which in turn changes the navbar elements.
What is the most proper way to style <Link> component in React Router v4? If <Link> is simply an anchor tag, it shouldn't have <button> element nested inside. It also shouldn't be nested inside a button (because it doesn't make any sense), so the most valid way is to style it as a button. What are the cons of this approach?
Since the accessibility tag was added, I'll answer from that perspective.
First decide if you want a link or a button. A link is for navigational purposes. It takes you to another page or somewhere else on the current page. A button is for performing an action.
So you need to decide what should happen when the user selects the element. Are you navigating (link) or performing an action (button)?
If you use a link and style it as a button because you want an action to happen, such as "add to cart" or "register" or "login", then there are several accessibility issues to handle:
the role of the link needs to be set to button
you need to add a keyboard handler to allow the space key to activate the link. enter will already work but space is not a native action to a link. When the role is set to "button", a screen reader will announce the element as a button and will tell the user to "press spacebar to activate", so you need to handle that key.
However, this could be resolved much easier if you just use a <button> instead of an <a>. See the first rule of ARIA.
I have a list of users and a sidebar
after clicking on a list item, i get a full information about user in a sidebar, but i don't know how to change "url" when a user is being clicked.
I don,t need to render another page, i just need to change window "href" after clicking on a user, this link should be reusable, i mean i can send it to someone and he will see the clicked before user.
react-router-redux package give you a reducer, actions to do what you want.