Javascript React路由器Redux和React引导

我已经和这件事斗争了一段时间了

我想有一个“主应用程序容器”，它总是有标志，导航。。。我想用react引导程序来修饰它

目前我遇到了一些问题，我的项目是基于davezuko的“react redux初学者工具包”

我尝试将所有引导

和

放在提供程序内的根容器中

所有的东西都显示出来了，看起来很好，但是我的链接都不起作用，当我放置一个常规的react路由器时，我会遇到同样的问题

我想，嗯，链接在视图中工作，视图被路由调用，所以我将所有这些复制到路由之后 导出默认值（存储）=>(

Babel、eslint和webpack允许进行编译，但是当我运行页面时，这些都没有显示出来，当我查看react开发控制台时，这些react节点甚至都没有出现

下面是我的资料，Root.js：

import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
import { Router } from 'react-router';

import { IndexLink, Link } from 'react-router';

import NavBar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';

export default class Root extends React.Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    routes: PropTypes.element.isRequired,
    store: PropTypes.object.isRequired
  };

  get content () {
    return (
      <Router history={this.props.history}>
        {this.props.routes}
      </Router>
    );
  }

  get devTools () {
    if (__DEBUG__) {
      if (__DEBUG_NEW_WINDOW__) {
        if (!window.devToolsExtension) {
          require('../redux/utils/createDevToolsWindow').default(this.props.store);
        } else {
          window.devToolsExtension.open();
        }
      } else if (!window.devToolsExtension) {
        const DevTools = require('containers/DevTools').default;
        return <DevTools />;
      }
    }
  }

  render () {
    const styles = require('./../containers/Root.scss');
    return (
      <Provider store={this.props.store}>
        <div>
          <div className={styles.Root}>
            <Link to='login'>login</Link>
            <NavBar fixedTop>
              <NavBar.Header>
                <NavBar.Brand>
                  <IndexLink to='/' activeStyle={{color: '#33e0ff'}}>
                    <div className={styles.brand}></div>
                    <span>Hero Energy Solutions</span>
                  </IndexLink>
                </NavBar.Brand>
                <NavBar.Toggle />
              </NavBar.Header>
              <NavBar.Collapse eventKey={0}>
                <Nav navbar>
                  <LinkContainer to='/chat'>
                    <NavItem eventKey={1}>Chat</NavItem>
                  </LinkContainer>
                  <LinkContainer to='/widgets'>
                    <NavItem eventKey={2}>Widgets</NavItem>
                  </LinkContainer>
                  <LinkContainer to='/survey'>
                    <NavItem eventKey={3}>Survey</NavItem>
                  </LinkContainer>
                  <LinkContainer to='/about'>
                    <NavItem eventKey={4}>About Us</NavItem>
                  </LinkContainer>
                  <LinkContainer to='/'>
                    <NavItem eventKey={5}>Login</NavItem>
                  </LinkContainer>
                </Nav>
              </NavBar.Collapse>
            </NavBar>
          </div>
          {this.content}
          {this.devTools}
        </div>
      </Provider>
    );
  }
}

import React，{PropTypes}来自'React'；
从'react redux'导入{Provider}；
从“react Router”导入{Router}；
从“react router”导入{IndexLink，Link}；
从“react bootstrap/lib/NavBar”导入导航栏；
从“react bootstrap/lib/Nav”导入导航；
从“react bootstrap/lib/NavItem”导入NavItem；
从“react router bootstrap/lib/LinkContainer”导入LinkContainer；
导出默认类根扩展React.Component{
静态类型={
历史记录：PropTypes.object.isRequired，
路由：需要PropTypes.element.isRequired，
存储：PropTypes.object.isRequired
};
获取内容（）{
返回(
{this.props.routes}
);
}
获取devTools（）{
如果（调试）{
如果（调试新窗口）{
如果（！window.devToolsExtension）{
require（'../redux/utils/createDevToolsWindow'）.default（this.props.store）；
}否则{
window.devToolsExtension.open（）；
}
}否则如果（！window.devToolsExtension）{
const DevTools=require（'containers/DevTools'）。默认值；
返回；
}
}
}
渲染（）{
const styles=require（'./../containers/Root.scss'）；
返回(
登录
英雄能源解决方案
聊天
小部件
调查
关于我们
登录
{this.content}
{this.devTools}
);
}
}

Routes.js：

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import CoreLayout from 'layouts/CoreLayout/CoreLayout';
import HomeView from 'views/HomeView/HomeView';
import LoginView from 'views/LoginView/LoginView';
import NotFoundView from 'views/NotFoundView/NotFoundView';
import RestrictedView from 'views/RestrictedView/RestrictedView';
import AboutView from 'views/AboutView/AboutView';

import { IndexLink, Link } from 'react-router';

import NavBar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';

import {UserAuthWrapper} from 'redux-auth-wrapper';
import {routerActions} from 'react-router-redux';

const CheckAuth = UserAuthWrapper({
  authSelector: (state) => state.user, // how to get the user state
  redirectAction: routerActions.replace, // the redux action to dispatch for redirect
  wrapperDisplayName: 'CheckAuth', // a nice name for the auth check
  failureRedirectPath: 'login'  // default anyway but meh!
});
export default (store) => (
    <div>
      <Route path='/' component={CoreLayout}>
        <IndexRoute component={HomeView} />
        <Route path='login' component={LoginView} />
        <Route path='home' component={HomeView} />
        <Route path='about' component={AboutView} />
        <Route path='restricted' component={CheckAuth(RestrictedView)} />
      </Route>
      <Route path='*' component={NotFoundView}/>
    </div>
);

从“React”导入React；
从“react router”导入{Route，IndexRoute}；
从“布局/CoreLayout/CoreLayout”导入CoreLayout；
从“视图/家庭视图/家庭视图”导入家庭视图；
从“视图/LoginView/LoginView”导入LoginView；
从“视图/NotFoundView/NotFoundView”导入NotFoundView；
从“视图/受限视图/受限视图”导入受限视图；
从“视图/关于视图/关于视图”导入关于视图；
从“react router”导入{IndexLink，Link}；
从“react bootstrap/lib/NavBar”导入导航栏；
从“react bootstrap/lib/Nav”导入导航；
从“react bootstrap/lib/NavItem”导入NavItem；
从“react router bootstrap/lib/LinkContainer”导入LinkContainer；
从'redux auth wrapper'导入{UserAuthWrapper}；
从“react router redux”导入{routerActions}；
const CheckAuth=UserAuthWrapper({
authSelector：（state）=>state.user，//如何获取用户状态
redirectAction:routerActions.replace，//要为重定向分派的redux操作
wrapperDisplayName:'CheckAuth'，//这是一个不错的身份验证名称
failureRedirectPath:'login'//默认值，但meh！
});
导出默认值（存储）=>(
);

我不确定这是否有多大帮助，但下面是客户端与react控制台的屏幕截图。react dev控制台的屏幕截图：

---

对不起大家！解决方法非常简单

CoreLayout

视图是所有这些东西应该去的地方。我最大的问题是没有正确理解react路由器是如何工作的！现在我明白了，原因如下：

路由

/

匹配所有包含

/

的请求（基本上是所有请求）。但它是一个React组件，包含其他React组件！因此返回

CoreLayout

组件，但

CoreLayout

的内容是相应的视图，即关于，主页

编辑： 您需要包括

{this.props.children}

在

CoreLayout

视图中，您希望在其中渲染其他子视图（否则它们将不会渲染！）