Reaktor-router nie wyświetla komponentu

Aktualnie uczę się routera reakcji, a następnie próbuję go zaimplementować w przykładowej aplikacji.Reaktor-router nie wyświetla komponentu

Oto mój kod:

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

używam gulp do browserify i reactify swoje źródła w /dist/js/main.js

Kiedy klikam na mój link about zmiany URL z http://localhost:8000/#/?_k=zkmiyh do http://localhost:8000/#/about?_k=6nhkao jeszcze wyświetlana składnikiem jest nadal hello-world.

Na mojej konsoli nie wyświetla się żaden błąd.

Czy czegoś brakuje?

Źródło

2015-11-24 pistou

Twój kod wydaje się być dobry, czy masz upewnij się, że renderowanie jest poprawne, jeśli umieścisz je bezpośrednio w "/"? – Mayas

@Mayas Tak Próbowałem zamieniać 'HelloWorld' i' About', ale zachowanie jest takie samo: 'About 'jest zawsze wyświetlany, bez względu na URL. – pistou

Wygląda na to, że problem z routerem-reakcją, to najprawdopodobniej naprawi problem: '... <ścieżka trasy ="/"komponent = {HelloWorld} /> <ścieżka trasy ="/o "komponencie = {About} /> ...' nawet jeśli ci się nie podoba. – Mayas

brzydki rozwiązaniem jest pozbyć zagnieżdżonych trasy tak:

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

Jednak ja zorientowaliśmy się właściwą drogę do zrobienia poprzez this doc

Potrzebujemy kolejnego komponentu (który nazwałem Main), który będzie zawierał odpowiedni składnik do wyświetlenia (np. this.props.children).

Używam IndexRoute, aby zdefiniować domyślny komponent do wyświetlenia.

Oto poprawiony kod:

/src/components/main.jsx (nowy)

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 (zmodyfikowany)

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

Źródło

2015-11-24 13:40:22 pistou

Działa idealnie. Pytanie rozwiązane .. – Mayas

hej! Dokument, z którym się łączysz, nie istnieje. Czy mógłbyś połączyć się z odpowiednim dokumentem? Utknąłem tutaj. :( – phoenix

@phoenix W mojej odpowiedzi zaktualizowałem [link] (https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md). – pistou

Mam również ten sam prob w moim app zmieniłem rodziców i ustawić jako samego węzła to działa może być może to pomoże Ci

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

);

Źródło

2015-11-24 11:47:58

FYI, wymyśliłem lepsze rozwiązanie niż to, którego używasz. Sprawdź odpowiedź, którą dodałem, aby uzyskać więcej informacji. – pistou

Reaktor-router nie wyświetla komponentu

Odpowiedz

Powiązane problemy