[SOLVED] Switching between routes using React-router

Switching between routes using React-router

I'm currently building my first webapp using react js and react router as I would like to develop a single page app. I'm just doing the first example with react router and trying to switch between two routes, however I'm not able to get it working. The goal is to have a very simple html page with a list of links and to swicht between the views.

When index.html is rendered I see the list of links, but when I click on the link I see the url path changing, however the content of the page is not changing, should not react-router js take care of that? What am I missing?

Below the code:

My index.html:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My First Webapp With React</title>
<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>

<div id="main" class="container">

    <!-- The App will be rendered here -->

</div>

<!-- Including the Google Maps API and the GMaps library -->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>

<!-- Our compiled JavaScript source file -->
<script src="./compiled.js"></script>

</body>
</html>

My main.js file:

var React = require('react');
var App = require('./components/App');
var About= require('./components/About');
var Router = require('react-router').Router
var Route = require('react-router').Route



React.render(
<Router>
  <Route path="/" component={App}>
    <Route path="about" component={About}/>
  </Route>
</Router>,
document.getElementById('main')
 );

My app.js:

var React=require('react');
var Link=require('react-router').Link;


var App=React.createClass({

getInitialState:function(){


    return {}

},
render:function(){


    return (<div>
        <h1>App</h1>
        <ul>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/inbox">Inbox</Link></li>
        </ul>

    </div>)

}

});

module.exports = App;

And my about.js

var React=require('react');

var About=React.createClass({



render:function(){



    return (<div>This is the about page</div>)

}


});

module.exports=About;

Solution

As i understand you miss the {this.props.children} in your App component. When you click to the link React has to know the way how to pass a child component, which comes from react-route to handle specific route, to the parent. And {this.props.children} its like a huge trumpet which helps react to know what the component should be rendered.

So it should be :

   //App component
    return (<div>
        <h1>App</h1>
        <ul>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children} // missed
    </div>)

React-router Link is here. I hope it will help you

Thanks