promise: route.component.fetchData ? route.component.fetchData({ store, params: match.params }) : Promise.resolve(null) })
const Menu = () => ( <Fragment> <h1>Menu</h1> <Link to="/menu/food">Food</Link> <Link to="/menu/drinks">Drinks</Link> <Link to="/menu/sides">Sides</Link> <Route path="/menu/:section" render={({ match }) => <h2>{match.params.section}</h2>} /> </Fragment> )
const Header = ({ match }) => ( <div className="header"> <Route path="/:page" render={({ match }) => ( <h1> {match.params.page} {' '} content </h1> )} /> </div> )
render() { return ( <Router history={this.history}> <Switch> <Route path="/article/:id" render={(props) => <Article {...props} key={props.match.params.id} /> } /> <Route component={Home} /> </Switch> </Router> ); }
const LoggingRoute = ({ component: ComponentToRender, ...rest }) => { return ( <Route {...rest} render={(props) => { alert('Route is Logging ' + props.match.params.eid); return <ComponentToRender {...props} /> }}> </Route> ) }
const Category = ({match}) => { console.log(match); return( <div> <ul> <li><Link to={`${match.url}/shoes`}>Shoes</Link></li> <li><Link to={`${match.url}/boots`}>Boots</Link></li> <li><Link to={`${match.url}/footware`}>Footware</Link></li> </ul> <Route path={`${match.path}/:name`} render= {({match}) =>(<div><h3>{match.params.name}</h3></div> )}/> </div> ) }
const Category = ({ match }) => ( <div> {match.path} {match.url} <ul> <li><Link to={ `${ match.url }/shoes` }>Shoes</Link></li> <li><Link to={ `${ match.url }/boots` }>Boots</Link></li> <li><Link to={ `${ match.url }/footwear` }>Footwear</Link></li> </ul> <Route path={ `${ match.path }/:name` } render={ ({ match }) => (<div> <h3> {match.params.name} </h3></div>) } /> </div>)
render() { return <Provider store={store}> <Router> <div> <Route exact={true} path="/" component={ChatView} /> <Route path="/user-profiles/:userId" render={(props) => { const { match } = props; return <UserProfileContainer userId={Number.parseInt(match.params.userId)} /> }} /> </div> </Router> </Provider>; }
const Category = ({ match }) => { return( <div> <ul> <li><Link to={`${match.url}/shoes`}>Shoes</Link></li> <li><Link to={`${match.url}/boots`}>Boots</Link></li> <li><Link to={`${match.url}/footwear`}>Footwear</Link></li> </ul> <Route path={`${match.path}/:name`} render= {({match}) =>( <div> <h3> {match.params.name} </h3></div>)}/> </div>) }
render() { return ( <Router> <div> <Route exact path='/' component={HomeContainer}></Route> <Route exact path='/customers' component={CustomersContainer}></Route> <Switch> <Route path='/customers/new' component={NewCustomerContainer}></Route> <Route path='/customers/:dni' render={props => <CustomerContainer dni={props.match.params.dni} /> }></Route> </Switch> </div> </Router> ); }
const App = () => ( <div> <Header /> <Switch> <Route exact path="/" component={Home} /> <Route path="/house/:houseId" render={ ({match}) => <House id={match.params.houseId}/> } /> <Route component={NotFound} /> </Switch> </div> )
render() { return ( <div className="App"> <Nav /> <Switch> <Route exact path="/" render={() => <Redirect to="/user/apple" />} /> <Route path="/user/:id" render={({ match }) => <User user={match.params.id} />} /> </Switch> </div> ); }
const Content = ({ match }) => ( <div className="header"> <Route path="/:page" render={({ match }) => ( <p> {match.params.page} {' '} header </p> )} /> </div> )
promise: route.component.fetchData ? route.component.fetchData({ store, params: match.params }) : Promise.resolve(null) })