I'm trying to use react router to provide routes for popup windows on my site.
I have core 'dashboard' on which users can click links which open a window above the core dashboard (so the dashboard can be seen beneath the window).
When reading the documentation for react-router I thought this kind of layout was the exact use-case for nested routes but it doesn't seem to be working.
I am testing by having the window be represented by a div with a background color so I can see it.
My routes are configured as such:
<Route handler={Application}>
<Route name='dashboard' path='dashboard' handler={Dashboard} >
<Route path='window/:id' handler={Window} />
</Route>
</Route>
What I expect is that the div appears when I visit /dashboard/window/1 but nothing changes, and looking at the DOM the window div is not even rendered.
Any help would be great.
Thanks
Inside the component that you want to nest the view in you need to add a <RouteHandler /> so that the view is displayed nested in that component. We did something similar but with tabs and wanted to just change the body of the tab and the highlighted tab to get the same effect.
In React Router 1.0 you simply need to add the following to your Dashboard.render tree:
{this.props.children}
Related
Hi I'm looking to have a modal (likely react-native-modalize) that is visible on every screen, but can adapt based on what screen is currently showing.
I don't want to introduce redux or anything like that. I don't think it's a tab navigation issue either, as this is a modal that starts out at only around 100 pixels but can open to almost full screen.
I have the modal as a component like this:
<QuickAccess {...props} />
And currently I call it on screens, but it's not an immediate render/doesn't seem to be a core part of the app as it just sort of... shows up.
Any thoughts would be really appreciated, thank you!
You can create a Modal and just render it on your root screen navigator like below and store its reference globally on your utility class and can show it anywhere in the app on any screen.
<Provider store={store}>
<MainScreen />
<YourModal ref={(ref) => Utility.setModalRef(ref)} />
</Provider>
I'm new to react & material-UI. I'm trying to build an internal webpage with react.
For the dashboard, I want to use a theme from material-UI but split it up into different components.
Theme: https://material-ui.com/getting-started/templates/dashboard/
Source: https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/dashboard
So, I started to split the different parts into different components. The AppBar in <TopMenu /> and the Drawer in <LeftDrawer />, the main Content into <Dashboard />
If I do so, the content component will not resize on expanding the drawer. What am I doing wrong?
I uploaded my source to https://codesandbox.io/s/festive-euler-ftjen
It would be great if anyone can explain me my fault...
Thanks :)
You must set position: 'relative' the container of drawer, here's sandbox link. https://codesandbox.io/s/elegant-bassi-02k6e
Let's say I have a React app (with React Router 4) with the following components and routes:
App (/)
Toolbar - A fixed toolbar
NavButton - A button whose appearance and behavior depends on the current route (see below)
MainMenu - A temporary drawer that pops out from the side to navigate between top-level routes
Admin (/admin)
Sidenav - A navigation drawer that is open all of the time on large screens and can be toggled on small screens. Clicking on items in the Sidenav navigates to different sub-routes under /admin
Content (/admin/<xyz>)
Public (/public)
Content
The behavior of the NavButton should be the following:
On a large screen:
it should always be a hamburger icon that opens the MainMenu.
On a small screen: (except for the first condition, this is similar to the experience on the Gmail mobile app)
if there is no Sidenav, it should display a hamburger icon that opens the MainMenu.
if the Sidenav is closed, it should display a back icon that opens the Sidenav.
if the Sidenav is open, it should display a hamburger icon that opens the MainMenu.
The /admin and /public routes are just examples. There are many more, some of which have Sidenavs and some of which don't.
My question is this: what is the React way to manage the UI state here and wire all of the components and routes together? It feels like App should be responsible for keeping track of whether the sidenav is open, so it can pass that information to Toolbar and others, but it also seems like App shouldn't be in charge of managing which of its potential children have or don't have Sidenavs. Also, how can props get passed down from App to some child when there's a Route in between?
Note: I'm fairly new to React and certainly not married to the component structure above; it's just for illustration.
It feels like App should be responsible for keeping track of whether the sidenav is open
True. The child components should always be presentational (pure/dumb) components.
App shouldn't be in charge of managing which of its potential children have or don't have Sidenav
I wouldn't call it "in charge". It is simply keeping the state of the application. The user is in charge, by clicking the hamburger button.
how can props get passed down from App to some child when there's a Route in between?
Why not? You can use render instead of component. For example:
let Parent = (props)=> {
<Route
path="/pizza"
render={()=> <Pizza topping={props.topping} />} />
}
I'm trying to implement a pop over that can show on any screen in the web application, using React+Redux+React router
The popover is a container, that is triggered by the application state.
But how is the best practice to do such a thing, since the background is transparent, and it should just show on any screen that is currently presented.
Should it be on top of the router, on hidden, and unhide on present? I can seem to find any example for this senario...
Popover can sit inside Root component, something like this.
<App>
<HomePage />
{shouldShowPopOver && <PopOver />}
</App>
You can dispatch { type: TOGGLE_POPOVER } action anywhere, to alter shouldShowPopOver. The styling(transparent, whole page etc) should be done through css.
You ca use react-bootstrap popover. Checkout the link
https://react-bootstrap.github.io/components.html#popovers
I'm using react-modal component and it works pretty well.
I have used react-modal-dialog before and it works like a charm! The benefit of this library is that you can define your <Modal> component near where the source of trigger is (some button?) and it is easy to trace the condition that determines whether the modal is displayed since it is near the trigger source.
Using this library, technically it does not matter where you put the modal component among your markup as the CSS of the modal makes it appear above all other elements.
I'm using Meteor, React and Material-UI to create an app. To keep it simple, let's say that the app has two pages: home and user.
Both pages should have the same layout: an AppBar with a hamburger menu on the left and an IconMenu on the right. When the hamburger menu is selected a Drawer will slide out from the left, and when the right menu is selected a drop-down menu will appear.
For my purposes the drawer menu is static, i.e. the menu entries don't change depending on what page (home or user) is being displayed. The drop-down menu on the right, however, will change depending on what page is active, i.e. it's context-sensitive.
My question is: what options do I have in terms of building this?
I think one option is to create two page components, e.g. HomePage and UserPage, and compose each using e.g. MyAppBar and MyDrawer, plus whatever content the specific page should contain. Each page would then be responsible for creating the menu items on the drop-down menu and passing them to MyAppBar and then the entire page would be rendered.
I believe this would solve the problem, but I'm not sure if there is a better way. For instance, is there a second approach where I could update just the content component of the page and have the owning component (e.g. an ApplicationPage component) query the content component (e.g. HomeContent or UserContent) for the entries of the drop-down menu and set the drop-down menu when there's a content component change? Any other options?
I'm using React Router to do routing for /home and /user so the above must also fit in with that.
I use react router for this purpose.
<Router history={browserHistory}>
<Route component={App}>
<Route path='/login/' components={{main: Login}} />
<Route path='/confirm'
components={{
main: Confirm,
sidebar:Sidebar
}}
/>
</Route>
</Router>
In the Template App, we can then use this.props.main and this.props.sidebar as variables.
Please look at https://github.com/reactjs/react-router/blob/master/examples/sidebar/app.js form more details.