React Router V4 восстанавливает состояние навигации из URL

Question

Допустим, мы отображаем выпадающий список и при выборе пользователь переходит на другую подстраницу через реагирующий маршрутизатор. Как мы можем восстановить выпадающий список при перезагрузке страницы с помощью активного маршрутизатора? Параметр projectNumber доступен только в компоненте Project. В некоторых других проектах я решил эту проблему, записав параметры маршрута в хранилище контекста или избыточности из дочернего компонента, но это, очевидно, не очень хорошее решение, правда?

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

Вы можете сделать это через состояние реакции-маршрутизатора. Просто посмотрите на пример:

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} />
        </>
    )
}

Он будет хорошо работать для перезагрузки страницы, но не для того, чтобы делиться ссылкой с кем-то другим. Но если вы собираетесь поделиться ссылкой с предварительно выбранным раскрывающимся списком, вы можете использовать параметр запроса (параметр GET).