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> ); }
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> ); }
<Switch> <Route path={`${match.path}/:actorName`} component={({ match: { params: { actorName } } }) => { return <img
function List(props) { const { actors, selectActor, selectedActor } = props; const match = useRouteMatch(); return ( <div className="list"> { actors.map( (actor, i) => ( <Link key={actor} className={`list-component ${actor === selectedActor ? "selected" : ""}`} onClick={() => selectActor(actor)} to={`${match.path}/${actor}`} > {actor} </Link> ) ) } </div> ); }