Reagieren-router nicht angezeigt-Komponente

Ich bin derzeit lernen zu reagieren-router, und dann zu versuchen, es in einer Beispiel-app.

Hier ist mein 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/Hallo-Welt.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/über.jsx

var React = require('react');

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

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

Ich benutze gulp zu browserify und reactify meine Quellen in /dist/js/main.js

Wenn ich auf meine about link, url-änderungen von http://localhost:8000/#/?_k=zkmiyh zu http://localhost:8000/#/about?_k=6nhkao noch die angezeigte Komponente ist immer noch hello-world.

Es wird kein Fehler angezeigt, auf meiner Konsole.

Gibt es etwas zu verpassen?

Dein code scheint gut zu sein, haben Sie sich sicher über rendert korrekt, wenn du es unter "/" direkt?
Ja ich habe versucht swapping HelloWorld und About aber das Verhalten ist das gleiche : About wird immer angezeigt, unabhängig von der url
Sieht aus wie das ist ein Problem mit reagieren-router, wird das wohl dein problem lösen: ... <Route path="/" component={HelloWorld}/> <Route path="/about" component={About}/> ... auch wenn Sie vielleicht nicht gefällt, es.
Du hast Recht, es funktioniert. Scheint sonderbar, da verschachtelte route ist eine der wichtigsten feature von react-router. Bitte fügen Sie Ihren Kommentar als eine Antwort, so kann ich es akzeptieren. Ich poste ein Problem auf deren github repo

InformationsquelleAutor pistou | 2015-11-24

Den hässlich Lösung ist loszuwerden verschachtelten Routen etwa so:

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

Doch, habe ich es herausgefunden die richtige Weise zu tun über dieser doc

Brauchen wir eine andere Komponente (die ich genannt Main), in der rechten Komponente auf dem display (d.h. this.props.children).

Benutze ich IndexRoute zu definieren, die Standard Komponente zur Anzeige.

Hier ist der korrigierte code:

/src/components/main.jsx (neue)

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 (geändert)

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

Funktioniert perfekt, in der Tat. Frage gelöst..
hey ! Der doc dir verlinkten nicht. Könntest du den link mit einem entsprechenden doc. Ich bin hier hängengeblieben. 🙁
Ich aktualisierte der link in meiner Antwort.

InformationsquelleAutor pistou

1

Ich habe auch das gleiche prob in meiner APP habe ich geändert Elternteil und als dieselben Knoten, dann funktioniert es auch sein mag, es kann Ihnen helfen,
```
module.exports = (
<Router>
    <Route path="/" component={HelloWorld} />
    <Route path="about" component={About}/> 
</Router>
```
);
- FYI, ich fand eine bessere Lösung, die Sie verwenden. Überprüfen Sie die Antwort, die ich Hinzugefügt für weitere Informationen.
InformationsquelleAutor Dhaval Patel

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.