// Gets the matched URL and removes any optional segments at the end. function getUrlWithoutParams (url = '', path = '', props, includeRequired) { const pattern = new RegExp( includeRequired ? /(\/:[^/?*]+[?*])*$/ : /(\/:[^/?*]+)*$/, props.sensitive ? '' : 'i' ), // Match all optional parameters at the end of the path. modifiedPath = path.replace(pattern, ''), modifiedMatch = matchPath(url, {...props, path: modifiedPath}); return modifiedMatch ? modifiedMatch.url : url; }
const Route = (props) => { const route = ( <ReactRouterRoute {...props} component={null} render={({match}) => ( <ReactRouterRoute {...{ ...props, computedMatch: { // Private React Router API. ...match, urlWithoutParams: getUrlWithoutParams(match.url, props.path, props), urlWithoutOptionalParams: getUrlWithoutParams(match.url, props.path, props, true), parentMatch: props.match } }} /> )} /> ); return route; }
componentWillReceiveProps(nextProps) { let resultQuery = {}; if (nextProps.location.pathname !== this.props.location.pathname || nextProps.location.search !== this.props.location.search) { matchRoutes(this.props.routes, nextProps.location.pathname).forEach(({route, match}) => { const query = nextProps.location && nextProps.location.search ? new URLSearchParams(nextProps.location.search) : false; if (query && query.has('search')) { resultQuery.search = query.get('search'); } console.log(match.url) this.props.dispatch(route.fetchInitialData(match.url, resultQuery)); }); } }
const TableBody = props => { const pb = { marginRight: '8px', }; let match = useRouteMatch(); const rows = props.charData.map((row, index) => { return <tr key={index}> <td>{row.id}</td> <td><Link to={`${match.url}/${row.id}`}>{row.name}</Link></td> <td>{row.job}</td> <td> <button style={pb} onClick={() => props.editChar(index)}> Edit character </button> <button style={pb} onClick={() => props.remChar(index)}> Remove character </button> </td> </tr> }); return <tbody>{rows}</tbody> }
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> ); }
<li className={cx(s.headerLink, className)}> <a className={cx({[s.headerLinkActive]: !!match && match.url.indexOf(headerLink) !== -1 })} onClick={() => this.setState({isOpen: !isOpen})}
<Link to={`${match.url}/tutorials/topics/components`}> Components </Link> </li> <li> <Link to={`${match.url}/tutorials/topics/props-v-state`}> Props v. State </Link> </li> <li> <Link to={`${match.url}/docs/topics/routing`}>Routing Docs</Link> </li> </ul> <Route path={`${match.url}/:sectionId/topics/:topicId`}> <RoutedTopic /> </Route> <Route exact path={match.url} render={(location) => <h3>Please select a topic.: {JSON.stringify(location)}</h3>} /> </Switch>
const TableBody = props => { const pb = { marginRight: '8px', }; let match = useRouteMatch(); const rows = props.charData.map((row, index) => { return <tr key={index}> <td>{row.id}</td> <td><Link to={`${match.url}/${row.id}`}>{row.name}</Link></td> <td>{row.job}</td> <td> <button style={pb} onClick={() => props.editChar(index)}> Edit character </button> <button style={pb} onClick={() => props.remChar(index)}> Remove character </button> </td> </tr> }); return <tbody>{rows}</tbody> }
<li className={cx(s.headerLink, className)}> <a className={cx({[s.headerLinkActive]: !!match && match.url.indexOf(headerLink) !== -1 })} onClick={() => this.setState({isOpen: !isOpen})}