Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Pass Data Through My React-Router with ReactJS?

I have the following JSON object...

{ name: "Jessie" }

And I want to be able to pass it through my Router so that it can be displayed on my pages. For example, this is my root page...

StaticPage.jsx

export default class StaticPage extends React.Component {
    render() {
        return (
                <div>
                <Router history={hashHistory}>
                    <Route path='/' component={Search} />
                    <Route path='/favorites' component={Favorites} />
                 </Router>
                 </div>
        );
    }
}

So passing this data to Search, I would imagine might look something like this...

<Route path='/' component={Search} name = {this.props.name}/>

However, nothing gets rendered when I do that. I have researched this quite a bit and understand, from what I've read, that you cannot pass objects through the Router. It's very odd bc Router looks like a traditional React component but does not function as such. None of the explanations of a work around seem clear to me. Could anyone provide me with an example using this code? I am using react-router 3.0. There didn't seem to be any magical solution with 4.0 so I figured I'd ask before upgrading. Thanks!

like image 952
Jessie Richardson Avatar asked Nov 30 '22 22:11

Jessie Richardson


2 Answers

It's because the component prop of <Route> only renders the component with route props, not your supplied props.

You can use the render or component prop on a <Route> in React Router v4 to pass a function which returns a <Search> element that explicitly passes the name:

<Route path="/" render={() => <Search name={this.props.name} />} /> 

Or with component:

<Route path="/" component={() => <Search name={this.props.name} />} /> 

But you should prefer render or else you'll have lots of remounting. If you still plan to use route props, you can also do:

render={routeProps => <Search name={this.props.name} {...routeProps} />}

A whole different approach, one more elegant in my opinion is to use route params and pass the name directly through the URL:

<Route path="/:name" component={Search} />

When you navigate to /Bob, you can access this.props.match.params.name which'll give you "Bob".

like image 164
Andrew Li Avatar answered Dec 02 '22 12:12

Andrew Li


It is not a good practice to pass the object data via the routes directly. It is recommended to pass a param such as name or id in this way:

<Route path='/favorites/:name' component={Favorites} />

And retrieve it from your request in the destination.

This is a duplicate issue: Pass object through Link in react router

like image 36
MattYao Avatar answered Dec 02 '22 11:12

MattYao