Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does react-router pass params to other components via props?

Thus far, the extent of my knowledge about how properties are passed from one component to another via parameters is as follows

//start: extent of my knowledge

Suppose there exists some state variable called topic in A.jsx. I want to pass this down to B.jsx, so I perform the following

B = require('./B.jsx') getInitialState: function() {return {topic: "Weather"}} <B params = {this.state.topic}> 

In B.jsx I can then do stuff like

module.exports = React.createClass({ render: function() {    return <div><h2>Today's topic is {this.props.params}!</h2></div> } }) 

which when called upon will render "Today's topic is Weather!"

//end: extent of my knowledge

Now, I'm going through a tutorial on react-router with the following code snippets

topic.jsx:

module.exports = React.createClass({   render: function() {     return <div><h2>I am a topic with ID {this.props.params.id}</h2></div>     }   }) 

routes.jsx:

var Topic = require('./components/topic'); module.exports = (   <Router history={new HashHistory}>     <Route path="/" component={Main}>       <Route path = "topics/:id" component={Topic}></Route>     </Route>    </Router> ) 

header.jsx:

  renderTopics: function() {     return this.state.topics.map(function(topic) {       return <li key = {topic.id} onClick={this.handleItemClick}>         <Link to={"topics/" + topic.id}>{topic.name}</Link>       </li>     })   } 

where this.state.topics is a list of topics drawn from the imgur API via Reflux.

My question is: by what mechanism is params passed in to props for topic.jsx? Nowhere in the code do I see an idiom as expressed in the above section on the "extent of my knowledge" viz. there is no <Topic params = {this.state.topics} /> in either routes.jsx or header.jsx. Link to the full repo here. React-router docs says that params is "parsed out of the original URL's pathname". This did not resonate with me.

like image 401
thetrystero Avatar asked Oct 02 '15 06:10

thetrystero


People also ask

How do you pass Props on Route React router?

If you are using react-router v4, you can pass it using the render prop. Sometimes you need to render whether the path matches the location or not. In these cases, you can use the function children prop. It works exactly like render except that it gets called whether there is a match or not.

How are props passed from one component to another?

As said, there is no way passing props from a child to a parent component. But you can always pass functions from parent to child components, whereas the child components make use of these functions and the functions may change the state in a parent component above.

How does router pass data with React?

To pass data when navigating programmatically with React Router, we can call navigate with an object. Then we can use the useLocation hook to return the object's data. const navigate = useNavigate(); navigate('/other-page', { state: { id: 7, color: 'green' } });

How do you pass props to a component rendered by React router V6?

V6 doesn't export a Switch component, it was replaced by a Routes component. Swap the Switch for the Routes component and rename your Routes component to something else to avoid the name collision. From here the home prop should either be treated as truthy/falsey.


1 Answers

That is a question about react-router internals.

react-router is a React component itself and it uses props to pass all the routing information to the children components recursively. However, that is an implementation detail of react-router and i understand it can be confusing, so read on for more details.

The routing declaration in your example is:

<Router history={new HashHistory}>   <Route path="/" component={Main}>     <Route path = "topics/:id" component={Topic}></Route>   </Route> </Router> 

So basically, React-Router will go through each of the components in the routing declaration (Main, Topic) and "pass" the following props to each of the components when the component is created using the React.createElement method. Here are all the props passed to each component:

const props = {    history,    location,    params,    route,    routeParams,    routes } 

The props values are computed by different parts of react-router using various mechanisms (e.g. extracting data from the URL string using regex expressions).

The React.createElement method itself allows react-router to create an element and pass the props above. The signature of the method:

ReactElement createElement(   string/ReactClass type,   [object props],   [children ...] ) 

So basically the call in the internal implementation looks like:

this.createElement(components[key], props) 

Which means that react-router used the props defined above to initiate each of the elements (Main, Topic etc.), so that explains how you could access this.props.params in the Topic components itself, it was passed by react-router!

like image 165
Faris Zacina Avatar answered Sep 17 '22 23:09

Faris Zacina