React-Router-Redux e React-Bootstrap

Question

Ho combattuto questo per un po '!

Voglio avere il 'contenitore principale dell'app' che ha sempre il logo, la navigazione ... Voglio usare react-bootstrap per renderlo bello.

Al momento sto correndo in problemi, il mio progetto è basato "reagire-redux-starter-kit" di davezuko

Ho provato a mettere tutto il mio bootstrap <NavBar> e <LinkContainers> nel contenitore principale all'interno del fornitore .

Tutto si presenta e sembra bello ma nessuno dei miei collegamenti funziona, e quando inserisco un normale router di risposta <Link> correrei gli stessi problemi.

ho pensato, bene, collega di lavoro nelle viste che si chiama per vie, così ho copiato tutto questo nelle vie dopo predefinito di esportazione (negozio) => (

Babel, eslint e webpack permettono questo compilare, ma quando eseguo la pagina non compare nulla di questo e quando guardo la console react-dev, questi nodi di reazione non appaiono nemmeno ..

Ecco cosa ho, 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> 
); 

Non sono sicuro se questo è di grande aiuto, ma qui c'è una schermata del lato client con la console di risposta. Schermata di reagire console dev:

Answer 1

Spiacente tutti! La soluzione è estremamente semplice.

La vista CoreLayout, è dove tutte le cose dovrebbero andare. Il mio più grande problema non era capire correttamente come funziona il react-router! Ora che ho capito, ecco il ragionamento:

Il percorso / corrisponde a tutte le richieste che hanno un / in esso (che è fondamentalmente tutte le richieste). Ma è un componente React, che contiene altri componenti React! Così la componente CoreLayout viene restituito, ma il contenuto della CoreLayout è corrispondente vista, vale a dire circa, casa ...

Edit: È necessario includere <div> {this.props.children} </div> Nel CoreLayout Visualizza dove volete che il vostro altro sub viste da rendere (altrimenti non renderanno!).