React Router V4 restore navigation state from url - react-router-v4

Question

Let's say we display a dropdown and on select the user is navigated to a different subpage via react router. How can we restore the dropdown selection on page reload with react router? The projectNumber param is only accessible in the Project component.
In some other projects I solved this problem by writing back the route param to a context or redux store from the child component, but this obviously isn't a nice solution, is it?
export const Projects: React.FC = () => {
const { data, loading, error } = useSomeData()
const history = useHistory()
const onSelectProject = useCallback(
(projectNumber: unknown) => {
history.push(`/project/${projectNumber}`)
},
[history],
)
if (error) return <p>{error.toString()}</p>
return (
<>
<Select loading={loading} onChange={onSelectProject} placeholder="Select a project">
{data?.map((project) => (
<Option key={project.id} value={project.number}>
{project.name}
</Option>
))}
</Select>
<Route path="/project/:projectNumber" render={() => <Project />} />
</>
)
}

Answer 1

You can do it via react-router state. Just see the example:
export const Projects = () => {
const history = useHistory()
const { state } = useLocation()
const onSelectProject = useCallback(
(projectNumber) => {
history.push({
pathname: '/project',
state: {
projectNumber
}
})
},
[history],
)
if (error) return <p>{error.toString()}</p>
return (
<>
<Select loading={loading} onChange={onSelectProject} placeholder="Select a project">
{data?.map((project) => (
<Option key={project.id} value={project.number}>
{project.name}
</Option>
))}
</Select>
{state && state. projectNumber && <Project projectNumber={state.projectNumber} />
</>
)
}
It will work fine for reload page, but not for sharing link to someone other.
But if you are going to share link with preselected dropdown, you can use query parameter (GET parameter).