I have a web application that uses ReactJS to handle client side navigation between the pages on the Nav bar. What I want to do next is set up an area of one of these pages in order that it can perform its own navigation and routing that is local to it's own area. Think of this page area as a kind of container for a game type app. My question is what would be the best approach for this? a) have all the navigation within that container handled by manual manipulation of id selectors or b) somehow leverage ReactJS routing just for this enclosed area.
If the answer is (b) I'd appreciate some guidance from all you ReactJS/front end gurus out there who don't mind helping a newbie out.
I've attached an image that hopefully depicts what I'm trying to achieve.
To reiterate: as the user clicks either left or right buttons the contents of the 'content frame' are changed accordingly. My question is if this is a valid use case for react router or would I be better off doing this by manual component rendering?
Page navigation
Cheers
Related
I am working with a Dashboard that has a menu. Let's take the attached menu as an example (which is NOT mine, I took a snapshot from a video).
Could you give me an idea of how I can do so that when pressing an option from the side menu, the content on the right side changes. Should I create an html document for each possible option and reference it from an "a href tag" or is there some other way to do it? Preferably the solution or idea does not involve react, angular or vue.
If you are not using any of SPA (Single page Application) then you must have to go for multipage activities where you need href on each option given in your main menu.
I'm building an app with vue-router and trying to achieve a UI similar to that of (the now defunct) Google Inbox. Or the Techcrunch homepage, which is possibly a better rendition of what I need.
there's a list of items
when you click on one of those items, it "expands in place" to display more details.
the URL also updates to reflect the expanded item
when clicking "back" the item collapses back into the list
when accessing the URL directly, the page should display the expanded item, and (optionally) could display more list items below.
Thing is, I can't figure out how I would build this - I'm trying to start from the idea of child routes, but I don't know where to place the child <router-view> since its location will always be dynamic based on which item was just clicked in order to expand.
I have a hunch it's related to named views but I can't wrap my head around it.
Any ideas welcome!
A similar topic came up on the Vue github page a while back, but involving the opening of modals as opposed to opening collapsing containers. One of the contributors to that thread wrote a pretty good blog post that might point you to a solution.
Once you get the dynamic routing sorted as they did above for modals, swapping the blurb for the article and animating the expansion should be fairly simple. The Vue docs cookbook has a good article on building a dynamic blog that should come in handy as well.
chatbox
profile view
So these are mockups for my social network project.
My question is that when a user logs in he is presented with this view.
There are two parent components THE LEFT PANE and RIGHT PANE.
THE LEFT PANE remains there for the whole session. BUT inside right pane I have to render
Chat box(when someone clicks on a friend from the list).
Pending request Component(When the see pending request button is
clicked)
Search Friends(When make friends button is clicked)
Profile View (When someone clicks on the interactive I button
Priorities:
I do not want to show the change in the address bar when any
component changes. So cannot use Browser Router.
Possible Solution but in doubt
I could use Conditional rendering by attaching some state variable
with each button click and when that button is clicked determining
the state i should render that specific component.
I could use Memory Router in react router in order to keep the code
clean and do not show the change in the address bar.
Help
CAN ANYONE WITH A GOOD EXPERIENCE IN REACT TELL ME IS THERE ANY OTHER WAY OF DOING THIS? AND IF NOT THEN WHICH IS A BETTER OPTION BETWEEN THESE TWO?
Pls refer to the images to get full idea about the situation.
thanks.
P.S. I can only post two links the other two components of pending request and make friends would be loaded the same way inside the right pane.
I think the best way would be to use the memory router Coz it would help to keep your code neat and understandable for reusability
I'm building a single page application with React and Backbone and am trying to figure out best practices for handling navigation between content in the app. My app will have a sidebar with links, for example, to "photos" and "settings". The sidebar is always present, so upon clicking "settings" I want the settings component to be rendered without the entire page reloading. Slack is a great example of what I'm looking for, where clicking a different channel switches the conversation content, but does not reload the entire page.
I had a few ideas on how to implement this, but i'm not sure what's best:
Have a general react component (console.jsx) that accepts a urlparameter as a prop to determine which content (photos or settings) to render.
or 2. have a general react component and define a state variable that represents which content to render.
Any help would be greatly appreciated!
Have you heard about react router? Seems to be what you want.
react router
So I've been going round and round trying to figure out the best way to have a footer that has a hidden panel for actions that slides up. The site is pretty basic, it has a header, content area and footer. I made a simple wireframe to explain this a bit easier:
So ideally the content panel are say something like posts, when clicked I would like to open the Secondary actions panel with the edit form prepopulated with the data from the content panel. If the Icon is clicked I would like to pop that same Secondary actions panel with a blank add new post form. Where I struggle with this is the convention of how to do this and what is the best via AngularJS. The secondary actions panel and footer are wrapped within a FooterController, but the content panels are wrapped inside a separate controller. I'm not sure whether I should be using a directive or a service.
I'm currently utilizing angular-ui-router but this doesn't manage the ui events that I need to happen.
Any advice would be greatly appreciated, I'm very knew to AngularJS so I'm trying to learn the right way of doing things with AngularJS rather than just building some hacked up crap that I'll end up scrapping later on!
Thanks!
I think secondary panel should have its own ui-view (with its own controller) instead of staying inside the footer.
For it to know which item has been clicked, you can pass through the ui-router state.
Let's say your control panel has post id 1234, then it should have a ui-sref="stateName({postId: post.id})"
And this state in ui-router will specify which controller/template it should fire, and inside that controller you can get the id from $stateParams.postId
You can then use the post id to get the post either remotely or from service if you have stored them earlier.