Question

我正在使用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'));

这是＆＃34;关于＆＃34;我试图通过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;

- 编辑 -

您也忘了将反应预设添加到您的babel配置中。

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

1 个答案: