Jiayee.net

My learning diary

Reach Router Match

#react #reach
I use Reach Router. I have a component which isn’t a child of Router, so it does not have the useLocation hook. But I need to access the current URL in that component. Here’s how I did it after seeing Jacek’s hint: <div> <Match path="/*"> {(props) => ( <MyComponent path="/*" match={props.match ?? ''} /> )} </Match> <Router> ... </Router> </div> interface Props { match: any; } export const MyComponent: FC<Props> = (props: Props) => { const pathname = props.

Continue reading "Reach Router Match"

Challenges of a multi-step flow with permalinks

#react
I decided to invest my time into covering the edge cases that were not handled by Design #1. Refer to yesterday’s post for the context. The edge cases are: Forms which need data from the preceding forms Dynamic form links I can deal with the first pain point by leveraging query parameters. A persistent Redux store is not needed (yet). A persistent Redux store is one which persists between page loads and refreshes.

Continue reading "Challenges of a multi-step flow with permalinks"

Multi-step forms

#react
I have a few pages which I need to chain into a single form flow. I also need to display a progress bar at the top of each form. I need to do some rearchitecting. Reasons: If we do not do anything, we will need to insert <ProgressBar .../> and the like into every form component. Sharing the forms/pages across other flows which do not need to progress bar is difficult.

Continue reading "Multi-step forms"

Previous page