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> ) }
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> ); }
export default function App() { return ( <div className="container"> <h1>Personal Notes App</h1> <Header /> <Switch> <Route exact path="/" component={Timeline} /> <PrivateRoute path="/notes" component={NotesPage} /> <PrivateRoute path="/logout" component={LogoutPage} /> <AuthRoute path="/login" component={LoginPage} /> <AuthRoute path="/register" component={RegisterPage} /> <Route path="/tags/:title" render={(props) => ( <TagTimeline key={props.match.params.title} {...props} />)} /> <Route path="/test" component={PopularTags} /> <Route component={NotFoundPage} /> </Switch> </div> ); }
const withModal = (Component, ModalComponent) => { return (props) => { const handleClose = () => { props.history.push(basePath); }; const basePath = props.match.path; return ( <> <Route path={`${basePath}/\\(fruit/:name\\)`} render={props => <ModalComponent name={props.match.params.name} onClose={handleClose} {...props}/>}/> <Component {...props} basePath={basePath}/> </> ); }; }
render={routeProps => { const itemId = routeProps.match.params.id; const selectedItem = this.props.items.find( item => item.id === parseInt(itemId)
<Route path="/admin/orders/completed" render={() => (<Orders orderStatus="completed" />)} /> <Route path="/admin/orders/canceled" render={() => (<Orders orderStatus="canceled" />)} /> <Route path="/admin/orders/view/:id" render={(props) => (<Order orderId={props.match.params.id} />)} /> <Route path="/admin/products/new" component={NewProduct} /> <Route path="/admin/products/list" component={ListProducts} /> <Route path="/admin/products/:id" render={(props) => (<Product productId={props.match.params.id} />)} /> <Route path="/admin" exact> <Redirect to="/admin/orders/new" />
render() { const { previousLocation, data } = this.state; const { location } = this.props; const initialData = this.prefetcherCache[location.pathname] || data; return ( <RouteTransitioner location={location}> <Switch location={location}> {this.props.routes.map((r, i) => ( <Route key={`route--${i}`} path={r.path} exact={r.exact} location={previousLocation || location} render={(props) => React.createElement(r.component, { ...initialData, history: props.history, location: previousLocation || location, match: props.match, prefetch: this.prefetch, }) } /> ))} </Switch> </RouteTransitioner> ); }
<Route exact path='/book/create' component={BookAddPage}/> <Route path='/book/edit/:id' render={(props) => { return <BookEditPage {...props} id={parseInt(props.match.params.id)}/> }}/> <Route path='/book/:id' render={(props) => { return <BookCardPage {...props} id={parseInt(props.match.params.id)}/> }}/> <Route component={NotFound}/>
<Route exact path="/products/:id" component={Product} /> <Route exact path="/products/edit/:id" render={(props) => { const idProd = parseInt(props.match.params.id); const product = products.find(p => p.id === idProd); return (
const App = () => ( <Router> <div> <Header /> <main className="main"> <transition name="fade" mode="out-in"> <Route exact path="/" component={EpisodeIndexContainer} /> <Route exact path="/episode/:id([0-9])+" render={props => ( <EpisodeDetailsContainer id={Number(props.match.params.id)} /> )} /> <Route path="/quiz" component={QuizIndexContainer} /> </transition> </main> </div> </Router> )
<Product {...props} product={this.getProduct(props.match.params.productId)} /> )}
<Home {...routeProps} tab="tagFilter" selectedTag={routeProps.match.params.selectedTag} /> )} /> <Route path="/feed"
function App() { return ( <Router> <div className="App"> {/* <Link to="customers">Customers</Link> */} {/* El componente Route inyecta tres propiedades si el atributo component es un componente pero no si es una funcion. */} <Route exact path="/" component={HomeContainer}/> <Route exact path="/customers" component={CustomersContainer}/> {/* Todo lo que esta dentro de switch busca si la ruta coincide exactamente y si es asi lanza ese componente y no continua evaluando */} <Switch> <Route path="/customers/new" component={renderCustomerNewContainer}/> <Route path="/customers/:dni" render={ props => <CustomerContainer dni={props.match.params.dni} /> }/> {/* Pasar resto de propiedades inyectadas si queremos <Route exact path="/customers/:dni" render={ props => <CustomerContainer {...props} dni={props.match.params.dni}/> }/> */} </Switch> </div> </Router> ); }