Question

115

React-router not displaying component

rated 0 times [ 116] [ 1] / answers: 1 / hits: 27205 / 9 Years ago, tue, november 24, 2015, 12:00:00

I'm currently learning react-router, and then trying to implement it in a sample app.

Here is my code:

index.html

<!DOCTYPE html>

<html>

    <head>

        <title>Sample APP</title>

        <link rel=stylesheet href=dist/css/style.css>

    </head>



    <body>

        <div id=main></div>

    </body>



    <script src=dist/js/main.js></script>

</html>

/src/app.jsx

var React = require('react');

var ReactDOM = require('react-dom');



var Routes = require('./routes');



ReactDOM.render(Routes, document.getElementById('main'));

/src/routes.jsx

var React = require('react');

var Router = require('react-router').Router;

var Route = require('react-router').Route;

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



var HelloWorld = require('./components/hello-world');

var NotFound = require('./components/not-found');

var About = require('./components/about');



module.exports = (

    <Router>

        <Route path=/ component={HelloWorld}>

            <Route path=about component={About}/>

        </Route>

    </Router>

);

/src/components/hello-world.jsx

var React = require('react');

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



module.exports = React.createClass({

    render: function() {

        return <div>

            <h1>

                Hello World !

            </h1>

            <Link to=/about>About</Link>

        </div>

    }

});

/src/components/about.jsx

var React = require('react');



module.exports = React.createClass({

    render: function() {

        return <h1>

            About

        </h1>

    }

});

package.json

{...}

dependencies: {

    browserify: ^9.0.3,

    gulp: ^3.8.11,

    gulp-concat: ^2.5.2,

    gulp-react: ^3.0.1,

    gulp-sass: ^2.0.1,

    gulp-server-livereload: ^1.3.0,

    gulp-util: ^3.0.4,

    gulp-watch: ^4.2.4,

    history: ^1.13.1,

    node-notifier: ^4.2.1,

    react: ^0.14.3,

    react-dom: ^0.14.3,

    react-router: ^1.0.0,

    reactify: ^1.1.0,

    vinyl-source-stream: ^1.1.0,

    watchify: ^2.4.0

}

I use gulp to browserify and reactify my sources into /dist/js/main.js

When I click on my about link, url changes from http://localhost:8000/#/?_k=zkmiyh to http://localhost:8000/#/about?_k=6nhkao yet the displayed component is still hello-world.

There is no error displayed on my console.

Is there something missing out?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

loganl

Add To Favorites

Follow

Total Points: 424

Total Questions: 86

Total Answers: 112

Location: Zimbabwe

Member since Thu, Jul 21, 2022

2 Years ago

answered 9 Years ago kylanalis · Accepted Answer

The ugly solution is to get rid of nested routes like so:

module.exports = (

    <Router>

        <Route path="/" component={HelloWorld} />

        <Route path="/about" component={About} />

    </Router>

);

Yet, I figured it out the right way to do via this doc

We need another component (which I called Main) that will contain the right component to display (i.e. this.props.children).

I use IndexRoute to define the default component to display.

Here is the corrected code:

/src/components/main.jsx (new)

var React = require('react');



module.exports = React.createClass({

    render: function() {

        return <div>

            // this is where you can add header

            {this.props.children}

            // this is where you can add footer

        </div>

    }

});

/src/routes.jsx (modified)

var React = require('react');

var Router = require('react-router').Router;

var Route = require('react-router').Route;

var IndexRoute = require('react-router').IndexRoute;



var Main = require('./components/main');

var HelloWorld = require('./components/hello-world');

var About = require('./components/about');



module.exports = (

    <Router>

        <Route path="/" component={Main}>

            <IndexRoute component={HelloWorld} />

            <Route path="about" component={About} />

        </Route>

    </Router>

);