React项目选中学生单选框后无法将姓名同步显示到URL求助

实现方案 #

你可以按照以下步骤修改代码，完成选中学生同步URL的需求，当前你的代码用的是react-router v5版本，以下修改适配现有写法： #

第一步：修改Container.js 路由与状态逻辑

更新路由配置增加学生姓名参数，同时新增URL参数读取、路径跳转逻辑：

// 顶部新增导入
import { useState, useEffect } from 'react'
import { Switch, Route, Redirect, useHistory, useParams } from 'react-router-dom'

const studentData = require('./Studentdata.json')
const wincTheme = require('./theme/WincTheme')

const Container = () => {
    const [barRating, setBarRating] = useState({ name: "difficult-and-fun" })
    const [lineRating, setLineRating] = useState({ name: "difficult-and-fun" })
    const [allStudentData, setAllStudentData] = useState({ name: "Evelyn" })
    const history = useHistory()
    const { studentName } = useParams() // 读取URL中的学生名参数

    // 监听URL参数变化，同步到本地状态
    useEffect(() => {
        // 校验学生名是否合法，避免非法路径访问
        const validStudent = studentData.student.find(s => s.name === studentName)
        if (validStudent) {
            setAllStudentData({ name: studentName })
        } else if (!studentName) {
            // 无参数时默认重定向到默认学生路径
            history.replace('/students/Evelyn')
        }
    }, [studentName, history, studentData])

    const handleStudentChange = e => {
        const { value } = e.target
        setAllStudentData({ name: value })
        // 选中学生时同步更新URL
        history.push(`/students/${value}`)
    }

    const handleChangeBarRating = e => {
        const { value } = e.target
        setBarRating({ name: value })
    }
    const handleChangeLineRating = e => {
        const { value } = e.target
        setLineRating({ name: value })
    }

    return (
        <main className="main">
            <Switch>
                <Route exact path="/">
                    <Redirect to="/home" />
                </Route>
                <Route path="/home">
                    <Home
                        studentData={studentData}
                        wincTheme={wincTheme}
                        barRating={barRating}
                        lineRating={lineRating}
                        handleChangeBarRating={handleChangeBarRating}
                        handleChangeLineRating={handleChangeLineRating} />
                </Route>
                {/* 修改学生页路由，增加可选的学生名参数 */}
                <Route path="/students/:studentName?">
                    <Students
                        studentData={studentData}
                        wincTheme={wincTheme}
                        handleStudentChange={handleStudentChange}
                        allStudentData={allStudentData}/>
                </Route>
            </Switch>
        </main >
    )
}

export default Container

第二步：功能验证

修改完成后即可实现预期效果：

• 选中任意学生单选框，URL会自动更新为/students/对应学生姓名
• 直接访问/students/Aranka这类带学生姓名的路径，会自动加载对应学生的成绩数据
• 访问/students不带参数的路径，会自动重定向到/students/Evelyn加载默认学生数据

如果你升级到了react-router v6版本，仅需做少量适配：将Switch替换为Routes、useHistory替换为useNavigate、路由组件通过element属性传入即可。

内容的提问来源于stack exchange，提问作者Ralf Van Eck