React-Router-Redux和React-Bootstrap

Question

我已經和這個戰斗了一段時間了！

我想擁有始終帶有徽標，導航的“主應用程序容器” ...我想使用react-bootstrap對其進行修飾。

目前，我遇到了問題，我的項目基於davezuko的“ react-redux-starter-kit”

我嘗試將所有引導程序<NavBar>和<LinkContainers>放在提供程序內的Root容器中。

一切都顯示出來，看起來不錯，但是我的鏈接都無效，當我放置一個常規的React-router <Link>我也會遇到同樣的問題。

我認為鏈接在路由調用的視圖中起作用，因此我在導出默認值（store）=>（

Babel，eslint和webpack允許對此進行編譯，但是當我運行頁面時，這些都沒有顯示，並且當我看一下react-dev控制台時，這些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>
    );
  }
}

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 dev控制台的屏幕截圖：

Answer 1

對不起大家！ 解決方案非常簡單。

所有這些東西都應該CoreLayout視圖中。 我最大的問題是沒有正確理解反應路由器的工作原理！ 現在我明白了，這是原因：

路由/匹配所有帶有/請求（基本上是所有請求）。 但這是一個React組件，其中包含其他React組件！ 因此返回了CoreLayout組件，但是CoreLayout的內容是相應的View，即About，Home...。

編輯：您需要在CoreLayout視圖中包括<div> {this.props.children} </div>在該視圖中您要渲染其他子視圖（否則它們將不渲染！）。