Réagir-routeur pas l'affichage de composant

Je suis actuellement en apprentissage de réagir-routeur, puis en essayant de le mettre en œuvre dans un exemple d'application.

Voici mon 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/composants/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/composants/about.jsx

var React = require('react');

module.exports = React.createClass({
    render: function() {
        return <h1>
            About
        </h1>
    }
});

paquet.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"
}

- Je utiliser gulp à browserify et reactify mes sources dans /dist/js/main.js

Lorsque je clique sur mon about lien, l'url change de http://localhost:8000/#/?_k=zkmiyh à http://localhost:8000/#/about?_k=6nhkao encore l'élément affiché est toujours hello-world.

Il n'y a aucune erreur ne s'affiche sur ma console.

Est qu'il manque quelque chose sur?

Ton code semble bon, vous êtes-vous sûr de affiche correctement si vous le mettez sous "/" directement?
Oui j'ai essayé de permutation HelloWorld et About mais le comportement est le même : About est toujours affiché, peu importe l'url
Il semble que ce soit un problème de réagir-routeur, ce sera très probablement de résoudre votre problème: ... <Route path="/" component={HelloWorld}/> <Route path="/about" component={About}/> ... même si vous ne pourriez pas comme ça.
Vous avez raison, il fonctionne. Semble bizarre, car imbriquée route est l'une des caractéristiques principales de react-router. S'il vous plaît ajouter votre commentaire est une réponse afin que je puisse l'accepter. Je vais poster une question sur leur dépôt github

InformationsquelleAutor pistou | 2015-11-24

La laid solution est de se débarrasser de imbriqués les itinéraires comme suit:

module.exports = (
    <Router>
        <Route path="/" component={HelloWorld} />
        <Route path="/about" component={About} />
    </Router>
);

Pourtant, j'ai tout compris la bonne manière de faire via ce doc

Nous avons besoin d'un autre composant (que j'ai appelée Main) qui contiendra le bon composant d'affichage (c'est à dire this.props.children).

- Je utiliser IndexRoute pour définir la par défaut composant à afficher.

Voici le code corrigé:

/src/composants/main.jsx (nouveau)

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 (modifié)

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>
);

Fonctionne parfaitement, en effet. Question résolu..
hey ! La doc est lié à n'existent pas. Pourriez-vous un lien avec un doc. Je suis coincé ici. 🙁
J'ai mis à jour le lien dans ma réponse.

InformationsquelleAutor pistou

1

J'ai aussi le même problème dans mon APPLICATION j'ai changé les parents et les définir comme même nœud puis c'est peut être cela peut vous aider
```
module.exports = (
<Router>
    <Route path="/" component={HelloWorld} />
    <Route path="about" component={About}/> 
</Router>
```
);
- Pour info, j'ai trouvé une meilleure solution que celle que vous utilisez. De vérifier la réponse que j'ai ajouté pour plus d'informations.
InformationsquelleAutor Dhaval Patel

Vous devez vous connecter pour publier un commentaire.