CODEWITHSUNDEEP
reactjs
Agha
Agha

Reputation: 411

Queries in a ReactJS Routing example

I have been learning Routing in ReactJS from this tutorial. And I have some questions from the code given in this tutorial.

1- In the App component of this code there is a prop value used named as "children" {this.props.children}. But the question is that from where this prop value is being passed to this App component?

2- In the main.js file there is browserHistory used <Router history = {browserHistory}>. The question is that why is it used/written there?

Components:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
               <li><Link to = "/home">Home</Link></li>
               <li><Link to = "/about">About</Link></li>
               <li><Link to = "/contact">Contact</Link></li>
            </ul>

           {this.props.children}
         </div>
      )
   }
}

export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

export default Home;

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}

export default About;

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}

export default Contact;

main.js

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>

), document.getElementById('app'))

Upvotes: 0

Views: 116

Answers (2)

Sam Morrow
Sam Morrow

Reputation: 38

This tutorial covers an outdated version of React router (v3), which may be why you're confused.

Let's start with your second question. Both v3 and v4 wrap their components in an upper-level <Router> component. This component maintains the state of the router, parsing what the current route is (conditionally rendering routes accordingly), pushing new changes and preserving a history of prior routes. React router v3 required you to pass a predefined (or customized) history object as props. The one you're using, browserHistory, uses the HTML5 history API as much as it can, and is the usual for production. With the introduction of v4 came prefab Router components (e.g. BrowserRouter) which accomplish the same goal without needing the history prop. Note that v4 also compartmentalized its components, so you will have to import BrowserRouter from 'react-router-dom' instead of 'react-router'.

In v3, {this.props.children} is generated and passed down by this top-level Router component. Any active route nested within a route is considered its child. Take this example: 

<Route path = "/" component = {App}>
  <Route path = "about" component = {About} />
  <Route path = "home" component = {Home} 
    <Route path = "secret" component = {secret} />
  </Route>
</Route>

Here, the "about" and "home" routes are potential children of "/" and "secret" is the only potential child route of "home". If our query were "/home/secret", then "/" would be passed "home" and "home" would be passed "secret" through the children object. React router v4 abandoned this design scheme; there are no longer nested child routes.

If you are interested in continuing to learn v3, I recommend their docs.

Upvotes: 1

Dane
Dane

Reputation: 9572

Regarding this.props.children, it is used to refer to child components of a React component. It is there in the React docs. This is also an article on children props.
As for browserHistory, it is an object used to manage and store the session history of your app. ( browserHistory is no longer used in React Router since v4. Use history instead. More on it here )

Upvotes: 0

Related Questions