function CharacterDetailSwitcher() { const match = useRouteMatch() return <Switch> <Route path={`${match.path}/:characterId`} render={(props) => <CharacterDetail {...props} />} /> <Route path={match.path}> <h3>Please select a character to see details</h3> </Route> </Switch> }
const ALink = ({ label, to, styles }) => { const match = useRouteMatch({ path: to, extact: true }); return ( <Link to={to} className={css(styles.a, match && styles.active)}> {label} </Link> ); }
const SubMenu = () => { const { brand } = useParams(); const { url } = useRouteMatch(); const models = MODELS_BY_BRAND[brand]; if (!models) { return <Redirect to="/error" />; } return ( <ul className={css(styles.ul)}> {MODELS_BY_BRAND[brand].map((model) => ( <li key={model} className={css(styles.li)}> <ALink label={model} to={`${url}/${model}`} styles={styles} /> </li> ))} </ul> ); }
function NavItem({label, to, exact}) { const match = useRouteMatch({ path: to, exact }); return ( <li> <S.NavLink match={match} to={to}> {label} </S.NavLink> </li> ); }
const Menu = props => { const location = useLocation(); const { url } = useRouteMatch(); const routes = [ { name: 'Home', route: `${url}/home` }, { name: 'List', route: `${url}/list` }, { name: 'Add', route: `${url}/edit/0` } ]; return <React.Fragment> <div className='nav-scroller bg-white box-shadow'> <nav className='nav nav-underline'> {routes.map((r, i) => <Link key={i} className={!!matchPath(location.pathname, r.route) ? 'nav-link active' : 'nav-link'} to={r.route}>{r.name}</Link>)} </nav> </div> </React.Fragment>; }
const Gadgets = props => { const { path } = useRouteMatch(); return <React.Fragment> <Menu /> <Switch> <Route path={`${path}/home`} component={Home} /> <Route path={`${path}/list`} component={List} /> <Route path={`${path}/edit/:id`} component={Edit} /> <Route path={`${path}`}> <Redirect to={`${path}/home`} /> </Route> </Switch> </React.Fragment >; }
const Brand = () => { const { brand } = useParams(); const { url } = useRouteMatch(); return ( <Fragment> <h1 className={css(styles.h1)}>{brand}</h1> <div className={css(styles.conatiner)}> <SubMenu /> <div className={css(styles.row)}> <Switch> <Route path={`${url}/:model`}> <Model /> </Route> </Switch> </div> </div> </Fragment> ); }
function Person() { let { url } = useRouteMatch(); let { id } = useParams(); let person = find(parseInt(id)); return ( <div> <h3>{person.name}’s Friends</h3> <ul> {person.friends.map(id => ( <li key={id}> <Link to={`${url}/${id}`}>{find(id).name}</Link> </li> ))} </ul> <Switch> <Route path={`${url}/:id`}> <Person /> </Route> </Switch> </div> ); }
const Navbar = () => { let match = useRouteMatch({ path: '/watch/', }); return ( <header className='navbar'> <nav> <Link to='/'> <h4>Wevid</h4> </Link> </nav> {match && ( <Link to='/'> <h4>Share a new video</h4> </Link> )} <ThemeToggle /> </header> ); }
const Topics = () => { const match = useRouteMatch(); console.log(match); return ( <div> <h1>Topics </h1> <ul> <li> <Link to={`${match.url}/components`}>Components</Link> </li> <li> <Link to={`${match.url}/props-v-state`}>Props v. State</Link> </li> </ul> <Switch> <Route path={`${match.path}/:topicId`}> <Topic /> </Route> {/* <Route path={match.path}> <h3>Please select a topic.</h3> </Route> */} </Switch> </div> ); }
function Topics() { let match = useRouteMatch();
export default function PeopleList({ people, loadingPeople, selectPerson }) { const match = useRouteMatch(); return ( <Scoped css={styles}> <div className="peopleList"> <Fragment> {people.map((person, index) => { return ( <Link key={person.name} className="person" to={`${match.path}?selected=${window.encodeURIComponent( person.id )}`} > {person.name} </Link> ); })} {loadingPeople && <div>Loading ...</div>} </Fragment> </div> </Scoped> ); }
function CharacterDetailSwitcher() { const match = useRouteMatch() return <Switch> <Route path={`${match.path}/:characterId`}> <CharacterDetail /> </Route> <Route path={match.path}> <h3>Please select a character to see details</h3> </Route> </Switch> }
const Widgets = props => { const { path } = useRouteMatch(); return <React.Fragment> <Menu /> <Switch> <Route path={`${path}/home`} component={Home} /> <Route path={`${path}/list`} component={List} /> <Route path={`${path}/edit/:id`} component={Edit} /> <Route path={`${path}`}> <Redirect to={`${path}/home`} /> </Route> </Switch> </React.Fragment >; }
const Menu = props => { const location = useLocation(); const { url } = useRouteMatch(); const routes = [ { name: 'Home', route: `${url}/home` }, { name: 'List', route: `${url}/list` }, { name: 'Add', route: `${url}/edit/0` } ]; return <React.Fragment> <div className='nav-scroller bg-white box-shadow'> <nav className='nav nav-underline'> {routes.map((r, i) => <Link key={i} className={!!matchPath(location.pathname, r.route) ? 'nav-link active' : 'nav-link'} to={r.route}>{r.name}</Link>)} </nav> </div> </React.Fragment>; }