Réaction-routeur et les routes enfants express ne déclenchent pas

J'essaie de créer une configuration de projet simple similaire à jsfiddle mais dans ma machine locale. Je veux seulement avoir 3 fichiers pour chaque violon et un serveur pour démarrer l'application d'une seule page. J'utilise principalement l'écosystème de réaction.Réaction-routeur et les routes enfants express ne déclenchent pas

Le problème vient quand je veux utiliser le routeur de réaction. Avec cette configuration, seuls les déclencheurs de routage racine '/' et toutes les routes enfants redirigent vers index.html.

(j'omettre le fichier de style parce que je doute sa source du problème)

Toutes les suggestions?

server.js

var express = require('express'); 
var path = require('path'); 
var morgan = require('morgan'); 
//var history = require('connect-history-api-fallback'); 

var PORT = 3007; 
var HOST = 'localhost' 

var app = express(); 

/* 
app.use(history({ 
    disableDotRule: true, 
    verbose: true 
})); 
*/ 

app.use(morgan('tiny')); 

// Serve static assets 
app.use(express.static(__dirname)); 

// Always return the main index.html 
app.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname, 'index.html')); 
}); 

app.listen(PORT, HOST, function() { 
    console.log('Example app listening on port ' + HOST + ':' + PORT + '...'); 
});

index.html

<html> 
    <head> 
    <title>multi-page-form-with-router</title> 
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> 
    </head> 
    <body> 
    <div id="root"></div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.3/react-redux.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.4/ReactRouter.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.6.3/redux-form.min.js"></script> 

    <script type="text/babel" src="main.js"></script> 

    </body> 
</html>

main.js

const { Component } = React 
const { Router, Route, browserHistory, IndexRoute, Link } = ReactRouter 

const App =() => (
    <Router history={browserHistory}> 
    <Route path='/' component={Header}> 
     <IndexRoute component={Menu} /> 
     <Route path='first' component={FirstPage} /> 
     <Route path='second' component={SecondPage} /> 
    </Route> 
    </Router> 
); 

const Header =() => (
    <h1>Multi-page form</h1> 
) 

const Menu =() => (
    <ul> 
    <li><Link to='first'>Start form</Link></li> 
    </ul> 
) 

const FirstPage =() => { 
    return (
    <div> 
     <p>First Page</p> 
     <Link to='second'>Next</Link> 
    </div> 
) 
} 

const SecondPage =() => { 
    return (
    <div> 
     <p>Second Page</p> 
     <Link to='overview'>Next</Link> 
    </div> 
) 
} 

const Overview =() => { 
    return (<p>Overview</p>) 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
)

Source

2017-04-20 Ionthas

À moins que je me manque quelque chose ici, les routes de racines doivent se rendre, mais aussi rendre ses enfants. Dans votre exemple, Header ne fait que rendre itsefl.

Ceci est un exemple de travail que j'ai:

<Router history={browserHistory}> 
    <Route path='/' component={Root}> 
    <Route path='/examples/react-redux-websocket' component={App} /> 
    <Route path='/examples/react-redux-websocket/chat/:chatid/participant/:participantid' component={Chat} /> 
    <Route path='/examples/react-redux-websocket/chat/:chatid' component={Chat} /> 
    <Route path='/*' component={NoMatch} /> 
    </Route> 
</Router>

Root.js:

class Root extends Component { 
    render() { 
    return (
     //Render itself 
     <div> 
     //And its children too 
     {this.props.children} 
     <Footer /> 
     </div> 
    ) 
    } 
}

Comme vous pouvez le voir, tous les itinéraires rendus dans la route Root partageront même pied. Dans votre exemple, Header devrait rendre ses enfants. Maintenant, Si vous voulez avoir une hiérarchie d'URL, vous devez spécifier chaque route. Donc, si je veux avoir /xxx/route_1 et /xxx/route_2, je dois les préciser:

<Route path='/xxx/route_1' component={Route_1} /> 
<Route path='/xxx/route_2' component={Route_2} />

Il pourrait y avoir quelques différences en fonction de la version que vous utilisez, pour cet exemple que je utilise réagir route 3.0.2, mais en général, son usage est plus ou moins le même.

Je ne sais pas quelle version utilisez-vous, mais vous devrez peut-être également référencer l'itinéraire en ajoutant '/' avant.

J'espère vous aider. Faites-moi savoir s'il y a quelque chose que vous ne comprenez pas ou que vous pensez être incorrect, nous pouvons en discuter.

Vous pouvez jeter un oeil à l'ensemble par exemple here, et que vous voulez le voir, vous pouvez le trouver de travail here

Source

2017-04-20 14:33:20

Indiqué, il me manquait les enfants. Merci beaucoup. – Ionthas

Content de vous aider !! –

Je pense que vous devriez rediriger votre balise Link d'avoir un chef de file slash(/) comme ci-dessous

<Link to='/first'>Start form</Link>

Source

2017-04-20 13:33:38 Panther

J'ai essayé les deux sens, ni l'un fonctionne. En fait, mettre le chemin directement dans l'URL déclenche simplement index.html. Peu importe la route que vous spécifiez. – Ionthas

Réaction-routeur et les routes enfants express ne déclenchent pas

Répondre

Questions connexes