passing parameter to a new page while redirecting in React js

user_14019479 0
Viewed 163

I'm struggling with passing parameter to the new page when directing from the current one

this is my current page called 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>
    )    
}

and this is the new page 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>
        </>
    )
}

the props that I printed in the SinglePostView is not like what I want (which contains 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
reactjs parameters properties javascript
2 Answers

if you pass the props like that, they can be retrieved in the location object of react-router (in SinglePostView)

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

You can access the props passed like this.props.location.state Please try like this

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

And in 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>
        </>
    )
}
user_155795730
Related