/** * Finds the matching route from a given pathname: * * Ex: getRoute("/top/agility") -> "/top/:metric?/:playerType?" */ export function getRoute(pathname) { const route = ROUTES.find(({ path }) => { const match = matchPath(pathname, path); return match ? match.isExact : false; }); return route ? route.path : 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> )
const LoggingRoute = ({ component: ComponentToRender, ...rest }) => { return ( <Route {...rest} render={(props) => { alert('Route is Logging ' + props.match.params.eid); return <ComponentToRender {...props} /> }}> </Route> ) }
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 }) => ( <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>)
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>) }
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> ); }
/** * Finds the matching route from a given pathname: * * Ex: getRoute("/top/agility") -> "/top/:metric?/:playerType?" */ export function getRoute(pathname) { const route = ROUTES.find(({ path }) => { const match = matchPath(pathname, path); return match ? match.isExact : false; }); return route ? route.path : null; }