Маршрутизация к URL-адресам напрямую с помощью React Router + React + Flux

Question

Я использую React Router и пытаюсь визуализировать компоненты при переходе по определенному URL. Я пробовал решения, предлагаемые другими постами, но ни один из них, похоже, не работал для меня. Я использую React Router + React + Flux.

Это мой файл rout.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, {});
}

Answer 1

Ваши маршруты не работают, потому что это не способ передать их маршрутизатору.

Так должно быть

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

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'



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

export default routes;

--Edited--

Вы также забыли добавить предустановку реагирования в свою конфигурацию babel.