React路由器不會渲染任何其他路由

我使用的是React，React-router，React-router-redux和react-redux的最新版本，但我似乎無法獲得除我以外的其他路由應用程序呈現。我得到的只是一個空白頁面。我沒有做任何嵌套，但我懷疑它可能與我的設置有關...也沒有錯誤在控制檯中檢查時出現。React路由器不會渲染任何其他路由

我index.js看起來像這樣：

import 'babel-polyfill'; 
// Write entry-point js for webpack here.... 
import React from 'react'; 
import {render} from 'react-dom'; 
import {Provider} from 'react-redux'; 
import App from './containers/App'; 
import configureStore from './store/configureStore' 
import { Router, Route, browserHistory } from 'react-router'; 
import { PasswordResetView } from './views/PasswordResetView'; 
import {Test} from './components/Test'; 

const store = configureStore() 

const reactEntry = document.getElementById('react-root'); 
// Render.... 
render(
<Provider store={store}> 
    <Router history={browserHistory}> 
    <Route path="/" component={App}/> 
    <Route path="/test" component={Test}/> 
    </Router> 
</Provider>, 
    reactEntry 
)

我App.js是這樣的：

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { loginUser } from '../../actions'; 
import Navbar from '../../components/Navbar'; 
import {Link} from 'react-router'; 

class App extends Component { 
    render() { 
    const { dispatch, isAuthenticated, errorMessage, isFetching } =    this.props 
return(
    <div> 
    <div> 
     <Navbar 
     isFetching={isFetching} 
     isAuthenticated={isAuthenticated} 
     errorMessage={errorMessage} 
     dispatch={dispatch}/> 
    </div> 
    {this.props.children} 
    <div> 
     <Link to="/test">Test</Link> 
    </div> 
    </div> 
) 
    } 
} 

App.propTypes = { 
    dispatch: PropTypes.func.isRequired, 
    isFetching: PropTypes.bool.isRequired, 
    isAuthenticated: PropTypes.bool.isRequired, 
    errorMessage: PropTypes.string 
} 

const mapStateToProps = (state) => { 
    const { isAuthenticated, errorMessage, isFetching } = state.auth 
    console.log(state.auth) 

    return { 
    isAuthenticated, 
    errorMessage, 
    isFetching 
    } 
} 

export default connect(mapStateToProps)(App)

我Test.js文件進口反應，{}組件從 '反應'

export default class Test extends Component { 
    render(){ 
    return (
     <div>Test</div> 
    ) 
    } 
}

任何幫助任何將不勝感激！我敢肯定，我已經搞砸了什麼地方...

來源

2016-02-17 ksliu25

我最終改寫我的應用程序組件作爲更多的家庭/父組件來容納我的其他路線。我猜測我濫用react-router並在子路徑和父路由之間產生某種問題（儘管我確實使用this.props.children來測試..誰知道！）

render(
    <Provider store={store}> 
    <Router history={browserHistory}> 
     <Route path="/" component={App}/> 
     <Route path="/register(/:token)" component={RegistrationCompleteView}/> 
     <Route path="/resend-confirmation" component={ResendConfirmationView}/> 
     <Route path="/password-reset" component={PasswordRequestView}/> 
     <Route path="/password-reset(/:token)" component={PasswordCompleteView}/> 
     <Route path="/login" component={LoginView}/> 
    </Router> 
    </Provider>, 
    reactEntry

來源

2016-02-22 20:16:32 ksliu25

React路由器不會渲染任何其他路由

回答

相關問題