react-router-v4

Is there a way to nest routes in React Router v4? This works: <Router basename='/app'> <main> <Route path='/' component={AppBar} /> <Route path='/customers' component={Customers} /> </main> </Router> This does not: <Router basename='/app'> <Route path='/' component={AppBar}> <Route path='/customers' component={Customers} /> </Route> </Router> Customers Component: import React, { Component, PropTypes } from 'react' import styled from 'styled-components' export default class Customers extends Component { render () { return ( <Container> <h1>Customers</h1> </Container> ) } } const Container =

I am not really sure why its showing the default route once I did a query param change. Is there a better approach for this kind of issue? maybe I shouldn't be using query param? Open to get educated! Version "react": "^16.2.0", "react-dom": "^16.2.0", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", Test Case https://codepen.io/adamchenwei/pen/YeJBxY?editors=0011 Steps to reproduce Click on Home -> Step 1 Expected Behavior Go to Step 1 as well as Step 2 render correct dom Actual Behavior Empty, nothing renders on the page // For this demo, we are using the UMD build of react-router-dom

I'm trying to set up some nested routes to add a common layout. Check the code out: <Router> <Route component={Layout}> <div> <Route path='/abc' component={ABC} /> <Route path='/xyz' component={XYZ} /> </div> </Route> </Router> While this works perfectly fine, I still get the warning: Warning: You should not use <Route component> and <Route children> in the same route; will be ignored CESCO's answer renders first the component AppShell then one of the components inside Switch . But these components are NOT going to render inside AppShell , they will NOT be children of AppShell . In v4 to wrap

I am trying to group some of my routes together with React Router v4 to clean up some of my components. For now I just want to have my non logged in routes group together and my admin routes grouped together but the following doens't work. main.js const Main = () => { return ( <main> <Switch> <Route exact path='/' component={Public} /> <Route path='/admin' component={Admin} /> </Switch> </main> ); }; export default Main; public.js const Public = () => { return ( <Switch> <Route exact path='/' component={Greeting} /> <Route path='/signup' component={SignupPage} /> <Route path='/login' component

I'd like to display a title in <AppBar /> that is somehow passed in from the current route. In React Router v4, how would <AppBar /> be able to get the current route passed into it's title prop? <Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> Is there a way to pass a custom title from a custom prop on <Route /> ? Con Posidielov In react router 4 the current route is in - this.props

I was trying to implement authenticated routes but found that React Router 4 now prevents this from working: <Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </Route> <Route path="/domains" component={AuthenticatedWrapper}> <Route exact path="/domains" component={DomainsIndex} /> </Route> The error is: Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored In that case, whats the correct way to implement this? It appears in react