リアクタは複数のページを開いていません

Question

私の反応ルータは私のニュースと写真のページを開いていません。開いたら、各ページにヘッダーファイルを表示することになっています。ニュースページ（localhost：8080/news）を開こうとすると、自分のノードコマンドプロンプトに404ページが見つかりませんというエラーメッセージが表示されます。

My GitHub repository

var React = require('react'); 

var ReactRouter = require('react-router'); 

var Router = ReactRouter.Router; 

var Route = ReactRouter.Route; 


var browserHistory = ReactRouter.browserHistory; 

var Header = require('./components/Header.jsx'); 

var News = require('./components/News.jsx'); 

var Photos = require('./components/Photos.jsx'); 


var Routes = (

    <Router history={browserHistory}> 

     <Route path="/" component={Header}> 

      <Route path="news" component={News} /> 

      <Route path="photos" component={Photos} /> 

     </Route> 

    </Router> 

); 

module.exports = Routes; 

Answer 1

ここでは、あなたのmain.jsファイルに何ができるかを簡単に答えがあります。おそらく、コードを構造化するためのより良い方法があります。私は、インターネット上のより多くのリアクションの例を詳しく見てみることをお勧めします。

'use strict'; 

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Routes = require('./Routes.jsx'); 
var Header = require('./components/Header.jsx'); 

var Main = React.createClass({ 
    render: function(){ 
     return(
      <div> 
       <Header /> 
       <Routes /> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(<Main />, document.getElementById('switch')); 

あなたのコードには、.jsと.jsxの重複ファイルがたくさんあるようです。どちらか一方だけが必要なのは分かりますよね？

Answer 2

反応ルータv3.0を使用していたので、アンインストールして2.8.1バージョンをインストールしました。 ＃（つまりlocalhost /＃/ news）はまだ表示されていますが、十分に近いです。ご協力いただきありがとうございます。

var React = require('react'); 
var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 

var useRouterHistory = ReactRouter.useRouterHistory; 
var createHashHistory = require('react-router/node_modules/history/lib/createHashHistory'); 
var appHistory = useRouterHistory(createHashHistory)({ 
queryKey:false 
}); 

var Header = require('./components/Header.jsx'); 
var News = require('./components/News.jsx'); 
var Photos = require('./components/Photos.jsx'); 

var Routes = (
<Router history={appHistory}> 
    <Route path="/" component={Header}> 
     <Route path="/news" component={News} /> 
     <Route path="/photos" component={Photos} /> 
    </Route> 
</Router> 
); 
module.exports = Routes;