在 React js 中重定向时将参数传递给新页面

Question

当从当前页面定向时，我正在努力将参数传递给新页面

这是我当前的页面 SingleBox

function SingleBox(props){
    let history = useHistory();
    function moveToSinglePost() {
        history.push({
            pathname: "/single-post",
            state: props
        })
    }
    return(
        // <></>
        <Grid item md = {4} css = {GridCell}>
            <div onClick = {moveToSinglePost}>
                <Grid style = {singleBox}>
                    <img style = {singleImage} src = {props.BoxProps.val.image} />
                    <p  style = {userDisplay}> {props.BoxProps.val.user}</p>
                </Grid>
            </div>
        </Grid>
    )    
}

这是新页面SinglePostView

function SinglePostView(props){
    console.log("singlePostView", props);   
    return (
        <>
            <AppNavBar/>
            <Grid>
                <Grid item md = {6} style = {post}>
                    <Grid container style = {displayImage} >
                        <Grid item style = {singleBox}>
                            {/* <img src = "props.link"/> */}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </>
    )
}

我在 SinglePostView 中打印的 props 与我想要的不一样（其中包含 val，key，..）：

singlePostView 
{history: {…}, location: {…}, match: {…}, staticContext: undefined}
history: {length: 2, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
location: {pathname: "/single-post", state: {…}, search: "", hash: "", key: "0hx5t4"}
match: {path: "/single-post", url: "/single-post", isExact: true, params: {…}}
staticContext: undefined
__proto__: Object

Answer 1

如果你像那样传递道具，它们可以在 react-router 的位置对象中检索（在 SinglePostView 中）

const location = useLocation()
const { props } = location.state

Answer 2

您可以像this.props.location.state一样访问传递的道具请这样尝试

function SingleBox(props){
    let history = useHistory();
    function moveToSinglePost() {
        history.push({
            pathname: "/single-post",
            state: props
        })
    }
    return(
        // <></>
        <Grid item md = {4} css = {GridCell}>
            <div onClick = {moveToSinglePost}>
                <Grid style = {singleBox}>
                    <img style = {singleImage} src = {props.BoxProps.val.image} />
                    <p  style = {userDisplay}> {props.BoxProps.val.user}</p>
                </Grid>
            </div>
        </Grid>
    )    
}

并在 SinglePostView 中

function SinglePostView(props){
    console.log("singlePostView", this.props.location.state);   
    return (
        <>
            <AppNavBar/>
            <Grid>
                <Grid item md = {6} style = {post}>
                    <Grid container style = {displayImage} >
                        <Grid item style = {singleBox}>
                            {/* <img src = "this.props.location.state.link"/> */}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </>
    )
}

在 React js 中重定向时将参数传递给新页面

passing parameter to a new page while redirecting in React js

javascript

parameters

properties

reactjs