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

Routing to Urls Directly with React Router + React + Flux

本文关键字：React Flux URL 路由 Router      更新时间：2023-09-26

我正在使用 React Router，并试图在导航到特定 URL 时让组件呈现。我已经尝试了其他帖子提供的解决方案，但似乎都没有对我有用。我正在运行 React Router + React + Flux。

这是我的路线.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>
);

这是我的索引.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>
    );
  }
}

这是我的应用程序.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, {});
}

您的路由不起作用，因为这不是将它们传递到路由器的方式。

应该是这样的

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

路线.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 配置中。

相关文章：