React Router не будет отображать другие маршруты

Question

Я пользуюсь последней версией React, React-router, React-router-redux и response-redux, но, похоже, я не могу получить какие-либо другие маршруты, кроме моего приложения, для рендеринга. Все, что я получаю, это пустая страница. Я не делаю никаких вложений, но подозреваю, что это может быть связано с моей настройкой... также не возникает ошибок при исследовании в консоли.

мой 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 импортирует React, {Component} из'act '

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

Любая помощь будет высоко ценится! Я уверен, что я что-то напортачил...

Answer 1

Я закончил тем, что переписал свой компонент App как дополнительный компонент home/parent для размещения других моих маршрутов. Я предполагаю, что я неправильно использовал реагирующий маршрутизатор и у меня была какая-то проблема рендеринга между дочерними и родительскими маршрутами (хотя я использовал 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