React Router V4 从 url 恢复导航状态答案

【问题标题】：React Router V4 restore navigation state from urlReact Router V4 从 url 恢复导航状态
【发布时间】：2020-02-17 08:15:14
【问题描述】：

假设我们显示一个下拉菜单，并在选择时通过反应路由器将用户导航到不同的子页面。我们如何使用反应路由器恢复页面重新加载时的下拉选择？ projectNumber 参数只能在 Project 组件中访问。在其他一些项目中，我通过将路由参数从子组件写回上下文或 redux 存储来解决了这个问题，但这显然不是一个好的解决方案，是吗？

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

【问题讨论】：

标签： react-router-v4

【解决方案1】：

你可以通过 react-router 状态来实现。看例子：

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 参数）。

【讨论】：