react-router-dom@6的三种传参方式

1. 子路由携带形式

路由配置代码

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path={'/'} element={<Login/>} />
                <Route path={'/home/:id'} element={<Home/>} />
            </Routes>
        </BrowserRouter>
    )
}

原页面代码

const navigate = useNavigate()

const goHome = () => {
    navigate("/home/123")
}

目标页面代码

const params = useParams()

const back = () => {
    console.log(params.id)  //打印结果为 123
}

2. 问号（？）形式传参

这种形式不需要再配置路由代码

原页面代码

const navigate = useNavigate()

const goHome = () => {
    navigate("/home?id=123")
}

跳转页面代码

const [params] = useSearchParams()

const back = () => {
    console.log(params.getAll('id')[0])  //打印结果为 123
}

3.通过state传参

原页面代码

const navigate = useNavigate()

const goHome = () => {
    navigate("/home",{state:{id:123}})
}

目标页面代码

const location:any = useLocation()

const back = () => {
    console.log(location.state.id) //打印结果为123
}

使用ts时需要配置location的数据类型，上述中暂时配置为any