So I am just wondering if there are any common practices or basic guidelines as to when you should create separate pages vs just updating the components on the current page when using React? I tried to look online and could not find anything.
There are some scenarios in which you need your data or some state persisted, just some update in the UI, like Atlassian Login page.
When you write your email, it changes the route and changes some css (changes password field display from none to block).
Or in Jira next gen, there are tasks, if you click on one of the tasks in a scrum board, the page component is the same, but it brings up a modal component showing up the details of that task.
Why different routes? cause you can share the link and whenever someone navigates to that route, it brings up the page with the same UI that you saw when you copied the link.
Otherwise it's a cleaner approach to handle navigation using separate pages. So it's totally up to you and the kind of UI/UX design.
Related
I'm new to the web development.
For simplicity, let's assume there's one Textfield for setting the number of products (context information), and one button for submission (components that want to access the context information).
I'd like to log the timestamp and the number of products on the button click.
The button should be able to access the information from Textfield.
What is the best way to achieve this?
(in case it matters, I'm using google tag manager & their datalayer for logging)
The above example is simple, but in the real application, the components are multi-level nested, and the buttons are everywhere.
If I use useContext() or useForm(), it re-renders the components, but I don't really need re-rendering because it's only for logging.
Also it doesn't look good to make the components (e.g., button) dependent on the information they don't actually need for their functionality other than logging.
I'm very new to all of this and I've been stuck on these two problems for over a week, reaching out to the community to better understand the issue.
Here is the project have Frankensteined together: https://codesandbox.io/live/ec9a16d7ef6
I have a button in the navbar to login in with Metamask. I have another button on the 'nft collections' page to mint an NFT that shows up after you are logged in. My issue is that button only shows up after a refresh or switching between pages and I want it to update automatically. I'm assuming that the state (currentAccount) isn't being passed through components properly but I'm having difficulty understanding useState.
My second problem I'm trying to work through is creating a conditional render on the navbar that will include another page that can be accessed when a user has a specific NFT collection in their wallet. Again, I'm brand new to all of this so even just some examples to look at or helpful tutorials would be awesome. Thanks.
I am new to react and I haven't cleared all things in my mind yet.
I am currently working on a project where I need to build a react app with a landing page, a sign up/in page, an ask-a-question page and a answer-question page. Something like a stack overflow clone.
To my knowledge so far I get that I have two choices. 1) use react-router and have a function rendering what I want for each page or 2) have a state like showPage and with some if/else if render the page I want.
What is the correct way to do what I want? And in general when should I use react-router and when just state.
Thanks in advance
You'll always use routing if you have multiple pages to render. As you said you have 3 pages currently you'll need to work on.
Landing page
Sing in/ register
FAQ
What you'll want to do is wrap everything inside your app.js in Router and have say a pages folder that'll have all the pages you want to render.
In React, routers help create and navigate between the different URLs
that make up your web application. They allow your user to move
between the components of your app while preserving user state, and
can provide unique URLs for these components to make them more
shareable. With routers, you can improve your app’s user experience by
simplifying site navigation.
Read more here
You need to separate all this because when your project grows you'll thank yourself for creating specific file for specific workload. It'll be easier to manage. And when you're working on large scale projects you'd want to create layouts and have even bigger distributions.
layouts
|__admin_layout.js
|__user_layout.js
here admin layout will handle all routes specific to admin and user layout will handle all routes specific to users.
Routing helps you manage your pages much better
I have a problem with blocking page changes in the application. The application is written in react and installed in liferay (CMS). It wants to keep the user on the payment intermediary selection screen. Unfortunately, the methods I know do not work properly. Blocking on the "beforeunload" event only blocks the closing of the page or its refresh (I'm only interested in closing the tab, but it is an additional condition). Blocking the website by react router doesn't work properly either. The prompt component works only within the scope of the added page, and no longer works in the navigation created on liferay. This is the same for useHistory (history.block('msg')), because it works just like the prompt component. I also tried to get this effect with other events, unfortunately to no avail. Does anyone have an idea to solve this problem? Thank you in advance.
I'm not aware about Liferay navigation behavior but I can see two resolutions:
you could go on using react router to block the transition to another route:
You could find a full example on the official docs (https://reactrouter.com/web/example/preventing-transitions).
<Prompt
when={isBlocking}
message={location =>
`Are you sure you want to go to ${location.pathname}`
}
/>
if there are parts of your application not handled by react-router you could rely on some event from history, like the one described here:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document.
Current example
https://codesandbox.io/s/react-router-issue-xyw00
Situation: I have a existing reactjs app and I'm trying to build a website frame 'around' it.
So in the example
Click open layover, the content in red is the existing app.
Click Layover Dashboard, the content in the layover updates
Click close
The content in the frame has also been updated (which is not what I want).
But they both have a home and a dashboard.
I've searched for nested routing, but the questions are completely different from what I'm describing.
Is it possible to use multiple routes in different components with the same path without affecting each other? Or is there an alternative for my problem without changing any route to the existing app? Or is it just not possible to ignore routes?