Navigation in a single page app with react.js - javascript

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

Related

Redux or simple React to handle navigation

I am very new to React and Redux and I am currently trying to wrap my head around how states are shared through the UI.
I have a pretty simple use case.
Picture a container with three columns:
A left Side Menu with four buttons
A central content section
A right container with some other content
When I click one of the four buttons I want three things to happen:
The class on the button is updated so it has borders
The class on the other buttons is updated so if they had been clicked before their border class is removed
The content in one part of the middle section is updated. This content requires data from the backend (Django Rest) to be fetched
Here are my questions:
Should I separate this interaction into a UI only concern and a Data driven one or handle both with a single state?
Because the buttons share a parent component but they do not with the central component, would I be better off using Redux if I do not want to define the state at the very top level of the Container?
Because I am new and Hooks seem to be the way to go I am trying to use hooks rather than classes, does it still make sense to separate components and containers?
You can use react-router-dom library to achieve want you want.
for your left side menu you can create active class in css and then check for current route with location.pathname property of react-router-dom and if it is for that button, active class set for it.
and for your main section you can fetch data in useEffect hook.
I think it is good to separate data and UI but for buttons what I say is good.
and you can store data in redux for your main section.

Load Toolbar of AppBar dynamically based on current page - React Admin

I am relatively new to the React world and struggling to find a way to load IconButtons to the toolBar of an AppBar (from Material UI).
Say I am on pageA and like to have two IconButtons specific to pageA and when I got to pageB, I like to have the toolBar buttons loaded that are specific to pageB.
I have created a codesandbox project to make it easier for anyone to help.
https://codesandbox.io/s/material-ui--react-admin-1qc5x
I appreciate any help, guidance etc.
you can achieve this by multiple ways:
Redux: you can use react-redux and create a store where you can store your current_page value (best practice in case of SPA) and access the page value in
static getDerivedStateFromProps(props, state){
//your code here
}
Based on Route(react-router)
[what i have done] based on URL params as you are doing history.push so it will be easier to extract the params from your URL and based on that render your Toolbar Icons.
My code reference: https://codesandbox.io/s/material-ui--react-admin-nxh7m

Redux and react-navigation bottom-tabs component

I'm currently working on an app on which I have integrated Redux and react-navigation and I can't figure out how to do this correctly :
I have to use a bottom tabs navigation bar that I got from react-native-material-bottom-tabs and right now, I have a connection view, and the view that render the navigation bar with the redux router to navigate between those two.
There is a profile view with some children views displayed in one of the Bottom bar navigation's view and I can't figure out how to setup navigation for those views because they are inside a Bottom Navigation class, which is in the current redux navigation, but not the views it contains...
I tried different things such as local navigator inside the profile view for it and his children but I can't use my redux store by passing it to the local Navigator...
Right now architecture is AppNavigator contains { Connection , BottomTabs } and BottomTabs contains { Profile View, Home View, Event View }
How can I supply navigation and store with redux inside my bottom bar's view?
I have used this 'react-native-tabbar-bottom' api from npm you can also refer following link https://www.npmjs.com/package/react-native-tabbar-bottom.
I found a solution but it don't seem right : I pass the informations through the screenProps props of a StackNavigation, and those informations comes from my redux store.
This solutions works while finding a better way to handle it.

React Rendering different Children Components on button click

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

React.js routing within a separate container area on a page

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

Categories