routeur Meteor réagit rendu rien

que je suis ce guide Meteor React Routing mais malheureusement, mon application rend maintenant rien (après avoir ajouté le routage, l'application fonctionnait très bien avant la main), et je ne vois rien de malrouteur Meteor réagit rendu rien

App.jsx

import React, { Component } from 'react'; 
import Navigation from './components/Navigation'; 
import LoginForm from './components/LoginForm'; 

export default class App extends Component { 
    render() { 
     return (
      <div> 
       <Navigation /> 
       <p> 
        <h1>Something here</h1> 
       </p> 
     </div> 
    ); 
    } 
}

main.js

import React from 'react'; 
import { Meteor } from 'meteor/meteor'; 
import { render } from 'react-dom'; 

import { renderRoutes } from './Routes.jsx'; 

Meteor.startup(() => { 
    render(renderRoutes(), document.getElementById('app')); 
});

Routes.jsx

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route } from 'react-router'; 
import createBrowserHistory from 'history/createBrowserHistory'; 

import App from '../imports/ui/App.jsx'; 
import LoginForm from '../imports/ui/components/LoginForm.jsx'; 

const browserHistory = createBrowserHistory(); 

export const renderRoutes =() => (
    <Router history={browserHistory}> 
     <Route exact path="/" component={App} /> 
     <Route path="/login" component={LoginForm} /> 
    </Router> 
);

..et le code html

<head> 
    <title>Some title</title> 
</head> 

<body> 
    <div id="app"></div> 
</body>

J'ai vérifié que toutes les importations résolvent. Et lors de l'exécution meteor, il n'y a pas d'erreurs. Il n'y a pas non plus d'erreurs dans la console du navigateur, mais il y a juste une page blanche. Ai-je manqué quelque chose?

Source

2017-10-09 LokiSinclair

Vous ne retournez pas vos itinéraires.

Il devrait être comme ci-dessous,

export const renderRoutes =() => (
    <Router history={browserHistory}> 
     <Route exact path="/" component={App} /> 
     <Route path="/login" component={LoginForm} /> 
    </Router> 
); 

// or 

export const renderRoutes =() => { 
    return (
    <Router history={browserHistory}> 
     <Route exact path="/" component={App} /> 
     <Route path="/login" component={LoginForm} /> 
    </Router> 
    ); 
};

Source

2017-10-09 21:06:00 bennygenel

Merci d'avoir repéré que, malheureusement, même cette modification ne rend que des pages vierges aussi :( – LokiSinclair

@LokiSinclair pouvez-vous essayer de changer 'render (renderRoutes(), document.getElementById ('app'));' à 'render (renderRoutes, document.getElementById ('app')); ' – bennygenel

Il en résulte:" Attention: les fonctions ne sont pas valides en tant qu'enfant React. Cela peut arriver si vous renvoyez un composant au lieu de depuis le rendu. plutôt que de le retourner. "- Sortie à la console. – LokiSinclair

Malheureusement il y a eu une erreur qui n'a pas été jeté dans Meteor être. Il y avait un problème avec ma définition de routeur, ce qu'il devrait en fait être est:

export const renderRoutes =() => (
    <Router history={browserHistory}> 
     <div> 
      <Route exact path="/" component={App} /> 
      <Route path="/login" component={LoginForm} /> 
     </div> 
    </Router> 
);

Notez l'inclusion de div - comme il semble que le routeur ne peut avoir qu'un seul élément enfant.

Source

2017-10-10 12:23:38 LokiSinclair

routeur Meteor réagit rendu rien

Répondre

Questions connexes