使用React Router + React + Flux直接路由到Url

Question

我正在使用React路由器並嘗試在導航到特定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來渲染 「關於」 部分：關於.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--

你也忘了加上反應預置到您的通天配置。