使用React Router React Flux直接路由到URL

我正在使用React Router并尝试在导航到特定URL时呈现组件 . 我尝试过其他帖子提供的解决方案，但似乎没有一个对我有用 . 我正在运行React Router React Flux .

这是我的routes.js文件：

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>

);

这是我的index.js文件

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'));

这是我试图通过url呈现的“关于”组件：About.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文件：

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, {});
}