1
私はjsfiddleと同様の単純なプロジェクト構成を作成しようとしていますが、ローカルマシンにあります。反応ルータとエクスプレスの子ルートがトリガーされない
私は1つのフィドルごとに3つのファイルを持ち、サーバーは1ページのアプリケーションを開始したいだけです。私は主に反応エコシステムを使用しています。
私は反応ルータを使用したいときに問題が発生します。この設定では、ルート '/'ルートのみがトリガされ、すべての子ルートはindex.htmlにリダイレクトされます。
（私は、問題のソースを疑うので、私はスタイルファイルを省略します）
任意の提案ですか？
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')
)
Indded、私は子供がいなくなっていた。どうもありがとうございました。 – Ionthas
あなたを助けてうれしい!! –