React Router + React + FluxでURLに直接ルーティング

Question

React Routerを使用していて、特定のURLに移動したときにコンポーネントをレンダリングしようとしています。私は他の投稿によって提供された解決策を試しましたが、誰も私のために働いていないようです。私はReact Router + React + Fluxを実行しています。

これは私のroutes.jsファイルです：について：これは私のindex.jsは、これは私がURLを介してレンダリングしようとしている成分 "について" です

import './main.css'; 
import { Router, browserHistory } from 'react-router'; 
import routes from './routes' 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './components/App.jsx'; 
import About from './components/About.jsx'; 
import alt from './libs/alt'; 
import storage from './libs/storage'; 
import persist from './libs/persist'; 
const logger = require('morgan'); 
persist(alt, storage, 'app'); 
var bs = require('bootstrap'); 
import {Route, IndexRoute} from 'react-router'; 


ReactDOM.render(
    <Router history={browserHistory} routes={routes} 

    <Route path="/" component={App} /> 
    <Route path="/about" component={About} /> 

    </Router>, document.getElementById('app')); 

ファイルである

import React from 'react'; 
import About from './components/About' 
import {Router, Route, IndexRoute, browserHistory, routes} from 'react-router'; 
import App from './components/App.jsx' 



export default (
<Router history={browserHistory} routes={routes}> 
<Route path="/" component={App} /> 
<Route path="/about" component={About} /> 
</Router> 

); 

.jsxの：

import AltContainer from 'alt-container'; 
import React from 'react'; 
import { Link } from 'react-router'; 
import Navigation from './Navigation'; 
export default class Splash extends React.Component { 


    render() { 

    return (
     <div className=""> 
     <Navigation /> 

     </div> 
    ); 
    } 
} 

これは私のApp.jsxファイルです

import AltContainer from 'alt-container'; 
import React from 'react'; 
import BButton from './BButton.jsx'; 
import Navigation from './Navigation.jsx'; 
import Splash from './Splash.jsx' 
import About from './About.jsx' 



export default class App extends React.Component { 


    render() { 

    return (
     <div> 

     <Navigation /> 
     <Splash /> 


     </div> 

    ); 
    } 

} 

これは私のwebpack.config.jsファイルです：ルータにそれらを渡すない方法thatsのため

const path = require('path'); 
const merge = require('webpack-merge'); 
const webpack = require('webpack'); 
const NpmInstallPlugin = require('npm-install-webpack-plugin'); 
const TARGET = process.env.npm_lifecycle_event; 


const PATHS = { 
    app: path.join(__dirname, 'app'), 
    build: path.join(__dirname, 'build') 
}; 

process.env.BABEL_ENV = TARGET; 

const common = { 
    entry: { 
    app: PATHS.app 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    output: { 
    path: PATHS.build, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     loaders: ['style', 'css'], 
     include: PATHS.app 
     }, 
     { 
     test: /\.(js|jsx)$/, 
     loaders: [ 
     'babel?cacheDirectory,presets[]=es2015,presets[]=survivejs-kanban' 
     ], 
     include: PATHS.app 
     } 
    ] 
    } 
}; 
if(TARGET === 'start' || !TARGET){ 
    module.exports = merge(common, { 
    devtool: 'eval-source-map', 
    devServer: { 
     contentBase: PATHS.build, 
     historyAPIFallback: true, 
     hot: true, 
     inline: true, 
     progress: true, 
     stats: 'errors only', 

     host: process.env.HOST, 
     port: process.env.PORT 

}, 

plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new NpmInstallPlugin({ 
    save: true //--save 
    }) 
] 
}); 
} 

if(TARGET === 'build') { 
    module.exports = merge(common, {}); 
} 

Answer 1

あなたのルートが機能していません。

は、それはあなたがまた、インクルードがあなたのバベルの設定にプリセットを反応させる追加するのを忘れ、この

ReactDOM.render(
    <Router history={browserHistory}>{routes}</Router>, document.getElementById('app')); 

routes.js

--Edited--

import React from 'react'; 
import About from './components/About' 
import {Router, Route, IndexRoute, browserHistory, routes} from 'react-router'; 
import App from './components/App.jsx' 



const routes = <Route path="/"> 
    <IndexRoute component={App} /> 
    <Route path="/about" component={About} /> 
</Route> 

export default routes; 

ようにする必要があります。